Browsing Tag

CSS

CSS

Using CSS to equal height columns without javascript

February 2, 2018

Columns of equal height are required to design the web interface. If all the columns share the same background. If the height of the inner elements are not equal, there will be discrepancies in the interface design of the block as well as the overall appearance of the page.
A few years ago, we used to achieve that effect with some CSS trickery; table display properties for the grid elements was one popular way to get the effect done. Today, we have simple solutions for creating height columns using CSS3.

1. CSS Table properties.
We can make use of Table properties in CSS to achieve equal-height columns . But this is not the ideal solution right now to create layouts, as there are now a number of new alternatives

HTML:

<div class=”col-wrap”>
<div class=”col”>
<h2>Column 1</h2>
<p>Hello World</p>
</div>

<div class=”col”>
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>

<div class=”col”>
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>

CSS:

.col-wrap {
display: table;
width: 100%;
}

.col {
display: table-cell;
}
.col:nth-child(even){
background-color:orange;
}
.col:nth-child(odd){
background-color:yellow;
}

2. Using flexbox

Flexbox is way too simplified and easier approach to achieve equal-heighted columns in CSS. You don’t even need to provide a separate row element for the columns, all we need here is to tweak the Flexbox parent and the childs a bit to make them look aligned like a columnar grid.

HTML:

<div class=”f-grid”>
<div class=”f-grid-col”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nulla! Assumenda dignissimos harum, molestias iure repudiandae ratione praesentium. Illo facilis et velit ut quam omnis, porro molestiae magni, laboriosam ipsa.
</div>
<div class=”f-grid-col”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, quaerat blanditiis. Eligendi quae tenetur ratione repellendus ut.</div>
<div class=”f-grid-col”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nulla! Assumenda dignissimos harum, molestias iure repudiandae ratione praesentium. Illo facilis et velit ut quam omnis, porro molestiae magni, laboriosam ipsa.
</div>
</div>

CSS:

.f-grid {
display: flex;
justify-content: space-between;
margin-left: -1rem;
flex-flow: row wrap;
}

.f-grid-col {
flex: 1 0;
background-color: green;
margin-left: 1rem;
margin-bottom: 1rem;
}

3. Using css grid

The next method we would like to introduce is the method using css grid, This method is slightly more complicated than the aaa sex, you need to calculate the width of the columns inside the parent element.

HTML:

<div class=”g-grid”>
<div class=”g-grid-col”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia molestiae iure, a laboriosam facere consequuntur repellendus aspernatur porro ut. Doloremque fugiat saepe maiores.
</div>
<div class=”g-grid-col”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto incidunt, accusantium, cumque obcaecati similique et ducimus inventore fugiat velit exercitationem dolorem iusto porro repellat accusamus quia eum, quos eveniet expedita!
</div>
<div class=”g-grid-col”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto incidunt, quos eveniet expedita!
</div>
</div>

CSS:

 – Using the below formulae:

W(adjusted) = W(original) – (G * (n-1)/n)

.g-grid {
display: grid;
/* W(adjusted) = W(individual) – (1rem * 1/2) */
grid-template-columns: calc(33% – 1rem * 1/2) calc(33.3333% – 1rem * 1/2) calc(33.3333% – 1rem * 1/2);
grid-column-gap: 1rem;
}

.g-grid-col {
padding: 1rem;
background-color:red;
color:#fff;
}

4. You can use some other tricky tricks by using float and float explicitly or using a background gradient

• Equal columns with tag div using float and clear float

HTML:

<div class=’container-wrap’>
<div id=”container4″>
<div id=”container3″>
<div id=”container2″>
<div id=”container1″>
<div id=”col1″>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates totam distinctio, voluptatem laboriosam amet. Amet, voluptatum nihil ut officiis explicabo dolore quaerat assumenda officia incidunt aut aliquam, tempora ullam quos.
</div>
<div id=”col2″>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt provident quo illo magnam tempore facere fugiat nemo aliquid mollitia omnis amet, doloremque, iusto autem! Tenetur voluptas adipisci suscipit, natus saepe. Sint quia laudantium, iste cumque dolor voluptates laboriosam repellat labore, sequi earum sunt recusandae ipsum, rerum est inventore autem aliquid quasi necessitatibus fugiat.
<!– Column two end –>
</div>
<div id=”col3″>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur quibusdam sit ratione quam optio culpa omnis ut reprehenderit ab assumenda deserunt sed enim labore, nisi voluptates inventore odit nostrum maxime. Vero sit nesciunt repellat, facere. Possimus veniam impedit error quia officia labore expedita laudantium tempore, ipsum repudiandae, itaque, eligendi quasi.
</div>
<div id=”col4″>
<!– Column four start –>
<h2>Cross-Browser Compatible</h2>
<p>This 4 column layout has been tested on the following browsers:</p>
<h3>iPhone &amp; iPod Touch</h3>
<ul>
<li>Safari</li>
</ul>
<h3>Mac</h3>
<ul>
<li>Safari</li>
<li>Firefox</li>
<li>Opera 9</li>
<li>Netscape 7 &amp; 9</li>
</ul>
<h3>Windows</h3>
<ul>
<li>Firefox 1.5, 2 &amp; 3</li>
<li>Safari</li>
<li>Opera 8 &amp; 9</li>
<li>Explorer 5.5, 6 &amp; 7</li>
<li>Google Chrome</li>
<li>Netscape 8</li>
</ul>
<!– Column four end –>
</div>
</div>
</div>
</div>
</div>
</div>

CSS:

.container-wrap:after {
display: table;
content: “”;
clear: both;
}
#container4 {
clear: left;
float: left;
width: 100%;
overflow: hidden;
background: #b2f0f9;
}
#container3 {
clear: left;
float: left;
width: 100%;
position: relative;
right: 25%;
background: #89ffa2;
}
#container2 {
clear: left;
float: left;
width: 100%;
position: relative;
right: 25%;
background: #ffa7a7;
}
#container1 {
float: left;
width: 100%;
position: relative;
right: 25%;
background: #fff689;
}
#col1 {
float: left;
width: 21%;
position: relative;
left: 77%;
overflow: hidden;
}
#col2 {
float: left;
width: 21%;
position: relative;
left: 81%;
overflow: hidden;
}
#col3 {
float: left;
width: 21%;
position: relative;
left: 85%;
overflow: hidden;
}
#col4 {
float: left;
width: 21%;
position: relative;
left: 89%;
overflow: hidden;
}

• Equal columns using background

HTML:

<div class=”five-columns group”>
<div class=”col”>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class=”col”>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class=”col”>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class=”col”>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class=”col”>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>

CSS:

.five-columns {
width:100%;
background-image: -webkit-gradient(linear,
left top,
right top,
color-stop(0, #eee),
color-stop(20%, #eee),
color-stop(20%, #ccc),
color-stop(40%, #ccc),
color-stop(40%, #eee),
color-stop(60%, #eee),
color-stop(60%, #ccc),
color-stop(80%, #ccc),
color-stop(80%, #eee),
color-stop(100%, #eee)
);
background-image: -webkit-linear-gradient(
left,
#eee,
#eee 20%,
#ccc 20%,
#ccc 40%,
#eee 40%,
#eee 60%,
#ccc 60%,
#ccc 80%,
#eee 80%,
#eee 100%
);
background-image: -moz-linear-gradient(
left,
#eee,
#eee 20%,
#ccc 20%,
#ccc 40%,
#eee 40%,
#eee 60%,
#ccc 60%,
#ccc 80%,
#eee 80%,
#eee 100%
);
background-image: -ms-linear-gradient(
left,
#eee,
#eee 20%,
#ccc 20%,
#ccc 40%,
#eee 40%,
#eee 60%,
#ccc 60%,
#ccc 80%,
#eee 80%,
#eee 100%
);
background-image: -o-linear-gradient(
left,
#eee,
#eee 20%,
#ccc 20%,
#ccc 40%,
#eee 40%,
#eee 60%,
#ccc 60%,
#ccc 80%,
#eee 80%,
#eee 100%
);
}
.five-columns .col{
width:20%;
}

Link demo: https://jsfiddle.net/TrinhThang/0t7xe6hf/7/

That is the method of column height used today, you can choose the above methods to create beautiful web interface, but the current simple, optimized and most commonly used method is the use of css flexbox.

Front-end

Using CSS Shapes to create non-rectangular layout

October 31, 2017

For a long time, rectangle is the only shape that a web developer can create using CSS. Most creative non-rectangular layout end in using static image which affects a lot web performance. With the introduction of CSS3 and CSS Shapes, that situation is about to end.

Now you can draw custom paths, like circles, ellipses and polygons using CSS Shapes. Rectangles are too boring to use anymore. These shapes are very common in magazines and newspapers. They are used a lot to arrange content layout, such as wrapping text inside non-rectangular shapes.

CSS Shapes introduction

CSS Shapes enable web designers to create more abstract, geometric layouts, beyond simple rectangles and squares. New CSS properties are required to create these shapes including shape-outside and shape-margin. Currently these properties are only available in Chrome, Opera, and Safari, with the -webkit- prefix, hence -webkit-shape-outside.

Let’s take a look at some examples:
HTML:


<div class="support-css-shapes"></div>

<div class=”wrapper clearfix”>
<div class=”circle”></div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis..</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>

CSS:


.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}

.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

body {
font-family: “Helvetica Neue”, Helvetica, arial, freesans, clean, sans-serif;
color: #66595c;
background-color: #faf6ec;
}

/* Start the styles */
p {
line-height: 1.68;
}
h1 {
margin-bottom: 0;
}
h2 {
margin-top: 10px;
font-weight: 400;
line-height: 1.6;
}
.wrapper {
padding: 30px;
max-width: 720px;
margin-right: auto;
margin-left: auto;
}

/* Styles start here */
.circle {
width: 250px;
height: 250px;
background-color: #40a977;
border-radius: 50%;
float: left;
shape-outside: circle();
-webkit-shape-outside: circle();
margin-right:20px;
}

Demo:

http://jsfiddle.net/TrinhThang/a4xekkaw/

Values:

  • circle(): for making circular shapes.
  • ellipse(): for making elliptical shapes.
  • inset(): for making rectangular shapes.
  • polygon(): for creating any shape with 3 or more vertices.
  • url(): identifies which image should be used to wrap text around.
  • initial: the float area is unaffected.
  • inherit: inherits shape-outside value from parent.

The following values identify which reference of the box model should be used for positioning the shape within:

  • margin-box
  • padding-box
  • border-box

These values should be appended to the end, for instance: shape-outside: circle(50% at 0 0) padding-box. By default the margin-box reference will be used.

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up