Information Technology Reference
In-Depth Information
Article/Content styles.
This section will rely heavily on two new features
of CSS3: Flexible Box Model and Columns.
The Flexible Box Model is probably one of my favorite
new features of CSS3. In a nutshell, it allows one to
take control of how their page is laid out, using a grid
of flexible boxes and essentially eliminating the need to
hack together layouts by improperly using floats in one's
code.
CSS3 Columns are another time saving new feature of CSS3
and allow a designer/developer to take a block of code
and automatically convert it into a column based layout
that is just perfect for a newspaper demonstration.
*/
#content {
padding:0 10px;
display:-webkit-box; /* here we are using the -webkit-box argument instead of
plain old "box," so our code will work across newer and
older Android browsers*'
*/
-webkit-box-orient: horizontal; /* setting the box orientation to horizontal
displays the content in this container from
left to right instead displaying the content
in the traditional way of top to bottom */
}
#featured {
max-width:50%; /* our featured article will take up half the width of the display */
height:100%; /* our featured article will take up all of the available height of the
display */
box-flex:1; /* tell our child elements to be evenly sized and take up one "box"
space */
-webkit-box-flex:1;
}
#featured .entry {
-webkit-column-count: 2; /* this will display our featured content article text in 2
columns */
-webkit-column-gap: 20px; /* here we add a hearty 20px gap/spacing between our
columns */
-webkit-column-rule: 1px solid rgba(91,58,21,0.5); /* here we are adding a border to
our columns */
}
#regular {
margin-left:5px;
padding-left:10px;
max-width:49%;
box-flex:1;
-webkit-box-flex:1;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid rgba(91,58,21,0.5);
border-left: 1px solid rgba(91,58,21,0.5); /* here we are adding a border to the
#regular container to match the rest of the columns' borders */
}
#regular article {
Search WWH ::




Custom Search