“Change order” and “align to center” and “flexible width” using HTML5 and CSS3
Jul09

“Change order” and “align to center” and “flexible width” using HTML5 and CSS3

We can play the following items using below code: Change the order of baby boxes Align the baby boxes to center of father box Adjust baby box width flexible to fulfill the father box width .father { background:#CCCCCC; display:-moz-box; -moz-box-orient:horizontal; width:700px; -moz-box-pack:center; } .baby1 { background:#FF0000; padding:10px; margin:10px; color:#FFFFFF; -moz-box-ordinal-group:3; } .baby2 { background:#006600; padding:10px; margin:10px; color:#FFFFFF; -moz-box-flex:1; -moz-box-ordinal-group:2; } .baby3 { background:#0000FF; padding:10px; margin:10px; color:#FFFFFF; -moz-box-ordinal-group:4; } .baby4 { background:#999900; padding:10px; margin:10px; color:#FFFFFF; -moz-box-ordinal-group:1; } <div class="father"> <div class="baby1">Baby1</div> <div class="baby2">Baby2</div> <div class="baby3">Baby3</div> <div class="baby4">Baby4</div>...

Read More
Reversing the Box Order using HTML5 and CSS3
Jul08

Reversing the Box Order using HTML5 and CSS3

We can reverse the order of boxes using HTML5 and CSS3 using following code. .father{ background:#e2e2e2; padding:10px; /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; -moz-box-direction:reverse; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-direction:reverse; /* W3C */ display:box; box-orient:horizontal; box-direction:reverse; } .baby1{ background:#99FF66; padding:10px; margin:10px;} .baby2{ background:#FFFF66; padding:10px; margin:10px;} .baby3{ background:#CCFFCC; padding:10px; margin:10px;} .baby4{ background:#0099FF; padding:10px; margin:10px;} <section class="father"> <div class="baby1">baby1</div> <div class="baby2">baby2</div> <div class="baby3">baby3</div> <div class="baby4">baby4</div>...

Read More
CSS3 2D Transforms
Mar05

CSS3 2D Transforms

Browser Support Internet Explorer 9 requires the prefix -ms-. Firefox requires the prefix -moz-. Chrome and Safari requires the prefix -webkit-. Opera requires the prefix -o-. 2D Transforms In this chapter you will learn about the 2d transform methods: translate() rotate() scale() skew() matrix() You will learn about 3D transforms in the next chapter. The translate() Method With the translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position: div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ } The value translate(50px,100px) moves the element 50 pixels from the left, and 100 pixels from the top. The rotate() Method div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } The scale() Method With the scale() method, the element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis): div { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari and Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ } The skew() Method With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines: div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ } The value skew(30deg,20deg) turns the element 30 degrees around the X-axis, and 20 degrees around the Y-axis. The matrix() Method The matrix() method combines all of the 2D transform methods into one. The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements. div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */...

Read More

Media Queries Usage

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */...

Read More

Equal height for floating list elements

ul.themenboxen > li:nth-child(3n+1) { clear: both; } That will literally search in this form: Find all elements which match :nth-child(3n+1), meaning every third element inside its parent. Filter only those who are lis. Filter only those who are direct descendants of ul.themenboxen. Or in english, find every third element directly inside of ul.themenboxen, and apply clear: both on it. Note: I’m not sure about lower IE support....

Read More

Responsive Tables

The Unseen Column <table> <thead> <tr> <th>Code</th> <th>Company</th> <th class="numeric">Price</th> <th class="numeric">Change</th> <th class="numeric">Change %</th> <th class="numeric">Open</th> <th class="numeric">High</th> <th class="numeric">Low</th> <th class="numeric">Volume</th> </tr> </thead> <tbody> <tr> <td>AAC</td> <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td> <td class="numeric">$1.38</td> <td class="numeric">-0.01</td> <td class="numeric">-0.36%</td> <td class="numeric">$1.39</td> <td class="numeric">$1.39</td> <td class="numeric">$1.38</td> <td class="numeric">9,395</td> </tr> </tbody> </table>   @media only screen and (max-width: 800px) { table td:nth-child(2), table th:nth-child(2) {display: none;} } @media only screen and (max-width: 640px) { table td:nth-child(4), table th:nth-child(4), table td:nth-child(7), table th:nth-child(7), table td:nth-child(8), table th:nth-child(8){display: none;}...

Read More
'