Kompx.com or Compmiscellanea.com

Pure CSS responsive square

Windows : Internet Explorer 8.0+, Firefox 1.0+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 5.0+, SeaMonkey 1.0+ [ 2 ], NetSurf 3.0+, Hv3.

Responsive CSS square. No JavaScript / jQuery. Example:

 

HTML / XHTML. Code:

<div class="square">&nbsp;</div>

CSS. Code:

.square {width: 10%; height: 0; padding-bottom: 10%;}

/* Extra CSS, just styling the look: */

.square {background: #fd0;}

Width: 10% makes the .square div to be 10% of the parent element's width. Height: 0 eliminates any height the element may have, letting padding-bottom: 10% to make it exactly equal to the width. So each time the width of the parent container is changed, the element's size gets recalculated.

Based on the concept - CSS grid with responsive square cells:

Square cell 1
Square cell 2
Square cell 3
Square cell 4
Square cell 5
Square cell 6
Square cell 7
Square cell 8

[ 1 ]

As well as Netscape 6.01+, Mozilla 0.6+.

[ 2 ]

As well as Netscape 6.01+, Mozilla 0.6+.


Aliosque subditos et thema

 

JavaScript rollover. Image swap

 

Example n.1 ( For modern web browsers: Internet Explorer 4.0+, Firefox 1.0+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+, [ 3 ] ): HTML / XHTML. Code: <a href="javascript-rollover-image-swap.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" width="728" height="67" alt="JavaScript rollover. Image swap" /></a> CSS. Code: .image {border: 0px;} JavaScript. Code: imageout=new Image(); imageout.src="out.gif"; imageover=new Image(); imageover.src="over.gif"; function image_out(){ document.images['imageout'].src='out.gif'; }; function image_over(){ document.images['imageout'].src='over.gif'; }; Swap image 1 ( out.gif ): Swap image 2 ( over.gif ): Example n.2 ( For older web browsers: Internet Explorer 4.0+, Netscape 3.04+, Opera 3.21+ ): HTML / XHTML. Code: <a href="javascript-rollover-image-swap.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" name="imageout" width="728" height="67" border="0" alt="JavaScript rollover. Image swap"></a> JavaScript.

Non-breaking space ( &nbsp; ) in :before and :after content

 

Non-breaking space ( &nbsp; ) in :before and :after pseudo-elements. Hex code ( \00a0 ) is used in the content property instead of the named character entity ( &nbsp; ). Example: ABC HTML / XHTML. Code: <div>ABC</div> CSS. Code: div:before {content:"\00a0";} div:after {content:"\00a0";} /* Extra CSS to make non-breaking spaces more obvious here: */ div:before {height: 1em; width: 1em; display: inline-block; background: #f00;} div:after {height: 1em; width: 1em; display: inline-block; background: #00f;} [ 1 ] As well as Netscape 6.01+, Mozilla 0.6+. [ 2 ] As well as Netscape 6.01+, Mozilla 0.6+.