Posts tagged with “css3”

CSS Grid – The most exciting thing to happen since CSS3

Saturday, 2 February, 2019

Let’s take a quick look at the most exciting thing to come to front end web layout in a long time. That is the technology called CSS Grid.

The Problem & Solution:

Problem: Current tools for web layout are content-out and one dimensional.
Solution: Two-dimensional layout-in tool to separate content from presentation.

Introduction to CSS Grid:

CSS Grid is the most exciting new way to create amazing layouts on the web. It’s not a framework or library, it’s just an addition to the CSS language that allows us to quickly create flexible, two dimensional layouts. With the introduction of CSS Grid, we now have an independent layout mechanism which has a lot of cool benefits. Now we can write more resilient code without the help of any hacky tricks. In simple words, we can now do a lot many things with fewer lines of code.

Rather than having to deal with tables, flex boxes, floats and positioning – we now have this amazing, two dimensional layout mechanism, which allows us to control all aspects of our rows and columns, at the same time. Grid is one of the most powerful specification that, when combined with other parts of CSS such as flexbox, can help you create layouts that were previously impossible to build using plain CSS.

The grid also gives us a flexible way to change the position of elements completely through CSS, without changing a single line in the HTML code. This can be used with media queries to alter the layout at different breakpoints.

CSS Grid Definition:

CSS grid layout or CSS grid is a technique in Cascading Style Sheets that allows web developers to create two-dimensional complex responsive web design layouts more easily and consistently across browsers.

CSS Grid Terminology:

Grid container: Element containing a grid, defined by setting “display: grid;”. The first step to setting up your grid is to define your grid container. A grid container, houses and establishes and your grid. The container sets the grid formatting context and manages how its direct child elements are spaced, sized and aligned.

Grid item: Element that is a direct descendant of the grid  container. Any element inside a grid container is considered a grid item.

Grid line: Horizontal (row) or vertical (column) line separating the grid into sections. Grid lines are referenced by number, starting and ending with the outer borders of the grid.

Grid cell: The intersection between a grid row and a grid column. Just the same as in an html table cell.

Grid track: The space between two or more adjacent grid lines. Row tracks are horizontal and column tracks are vertical.

Grid area: Rectangular area between four specified grid lines. Grid areas can cover one or even more cells.

Grid gap: A grid gap is an empty space between grid tracks (normally called as gutters).

Browser Support:

As of October 2017, Chrome, Firefox, Safari and Edge all support CSS grid without vendor prefixes. IE 10 and 11 support CSS grid but with an outdated specification. On mobile, all modern browsers support CSS grid except for Opera mini and UC browser. Web developers targeting older browsers can utilize Modernizr 3.5.0 to detect and gracefully degrade the webpage as needed.

Example

I have created a fiddle to showcase the CSS Grid capabilities in a nutshell. You can play around with it and learn more about the possibilities.

Further Reading

A Complete Guide to Grid | CSS-Tricks
CSS Grid Layout – CSS: Cascading Style Sheets | MDN
Building Production-Ready CSS Grid Layouts Today
CSS Grid Layout – W3Schools

How to optimize the image use in HTML and CSS3?

Monday, 29 September, 2014

You’ll hardly find a website that doesn’t use images. One can’t overlook the fact that we’re living in a digital era, and thus, adding images help to increase engagement rate on your site. There are some stats that will further illustrate why adding images to a site is so important. According to a few sources, articles with images get 96 percent more views while a press release gain 45 percent views and so on. Plus, around 67% of consumers say that image-quality is very important for choosing and purchasing a product from an e-commerce site.

So, now that you’ve become convinced about adding images to your site make sure to embed them in the best possible way. Unfortunately, not all of us still understand how to place images in the website in the right manner. Remember, while adding images ensure that they’re relevant and helps to interact your message clearly, and are high in quality.

Did you know that search engine such as Google index your images just like text? That’s true, just like Google indexes the keyword placed in your text, similarly it deploys crawlers to index and rank your images as well. In order to make your images search engine optimized you’ll have to pay focus on trimming image sizes to optimize the site performance.

How to Work With Images in HTML?

In order to optimize your images for your website when using HTML as your choice of markup, you will have to understand about image tags that lets you insert an image on your site’s web page in the best possible manner. For example, let’s have a look at the following code:

2
<img title="Trending Product" alt="Some of the latest trending products of our company" src="images/products/trendingproduct.jpg" />

In order to use the image tag correctly, you’ll first have to understand about each and every attribute of the img tag, as listed below:

The title attribute:

When a user will hover over the image placed in your site, its title will be displayed in the form of a pop up. Now see the above code, here when your site visitors will move their mouse over the image, they’ll see a pop up with the text “Trending Product,” which will the name of your product (make sure to keep the title descriptive, and gives information about what the image is about).

The src attribute:

src also referred to as source is specifying the location where your image is stored – it can be either an URL or an image folder within your directory.

The ALT attribute:

Alt is the most important attribute of the image tag. The text within the Alt attribute is used when some doesn’t load or is being used by some visually impaired. Also, search engine uses to determine how to index an image. The alt attribute is very useful not only for the visually impaired, but also optimizes your SEO. Since, this attribute is so important make sure to use it correctly by giving right description about your image with relevant keywords.

Size of the image:

A lot of sites suffer one common problem while adding images that is slow page loading time. So, make sure to define the correct image size. So, if you don’t want to degrade your site’s performance ensure to cut down the image file size but without sacrificing it’s quality. For instance, if your image appears as 60×60, then use an image file of size 60×60. If you’re using a large-size image 600×600 image, and tells the browser to resize it to 60×60, the browser will still load the large image and later resize it to a smaller size. But make sure not to let your browser shrink the larger image to a small one. For this, you can make use of an image editing program instead.

How to Work With Images in CSS3?

The web is filled with lots of CSS tricks that helps to optimize the image, however here we’ve discussed about a single trick that you’ll find quite useful when you can’t change the image on your site’s page, because you don’t have access to HTML. You can achieve your objective using the CSS box-sizing property.

For example, if you want to replace an img tag on your site with an image that is hosted somewhere else, but don’t have access to the markup (as shown in the code below) you can use the box-sizing property to keep dimensions fixed and add the other (new) image as the background image.

1
2
3
4
5
6
<body>
<!-- .header across website on other pages with different children, so no background image is added-->
<div class="header">
<img class="newBanner" src="http://xyz1.com/banner.png">
</div>
</body>

Code after including CSS3 box-sizing property:

/* All in one selector */

1
2
3
4
5
6
7
8
9
10
.newBanner&nbsp;{
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: url(http://xyz2.com/mynewbanner.png) no-repeat;
width: 150px; /* Width of new image */
height: 234px; /* Height of new image */
padding-left: 150px; /* Equal to width of new image */
}

Conclusion

So, if you too want to use the image in the right way in HTML and CSS3, then hopefully this post will help you understand about how to use image tag correctly in HTML, and the CSS3 trick that let you replace an existing image with another one hosted elsewhere.

Ben Wilson is an enthusiastic writer and skilled WordPress developer. He has built up many WordPress website and also helped in  converting HTML to WordPress theme for many companies He likes sharing insightful knowledge about WordPress having more than half decade of experience.

Pure CSS – HTML accordion using Details & Summary elements

Monday, 11 June, 2012

Have you ever dream of being able to create an accordion or toggle widget purely using HTML and CSS? Yes it is possible to create a nice looking and easily configurable accordion widget purely using the power of HTML5. No need to load any external javascript plugins or libraries. Gone are the days when you had to depend on javascript plugins to create interactive accordion widgets.

HTML5 – CSS3 duo together is shaping up to be an exciting technology of all time, which can make impacts on almost all areas of webdesign such as animations, user interaction, gaming, geolocation, 3D modeling, visualizations etc… those things were possible only with Javascript or flash earlier.

Demo

Before we continue to the css/html code, let’s take a look at the fully-functional accordion widget here…

Details and Summary Elements

By using the <details> and <summary> elements together we can create an accordion like toggle widget.
As per W3C specification the detail element is defined as

The <details> tag specifies additional details that the user can view or hide on demand.

The <details> tag can be used to create an interactive widget that the user can open and close. Inside <details>, there can be put any sort of content. The content of a <details> element will be hidden by default unless the open attribute is set.
W3C defines the summary element as

The <summary> tag defines a visible heading for the <etails> element. The heading can be clicked to view/hide the details.

However it is not always necessary to define the summary element, if there is no child summary element, the user agent will provide its own legend.

Usage – Syntax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<details>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
</details>
<details>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
</details>
<details>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
</details>
<details>
   <summary>Click to show/hide</summary>
   <p>content goes here<p>
</details>

Browser Support

It is really unfortunate that only chrome and android browser at the moment offer full native support to the detail and summary elements. Opera announced that they will soon support this feature. For the time being wa can get it work on other browsers with the help of polyfills. There is an awesome jquery fallback script created by Manuel Bieh which will do the trick on other browsers.
source: http://caniuse.com/details

Notify: Pure CSS notification bar using :target pseudo class

Tuesday, 14 February, 2012
pure css notification bar

For quite some time now, I have had this little idea of a CSS based notification bar floating in my head… and was wondering, would there be a way to create it purely using CSS. Finally I decided to spend some time this weekend, and the time spent on it was well worth it. Yes it’s all driven by the CSS3 magic. Absolutely no javascript or jquery was used in the making of this notification bar.

I tried a third party service called hellobar for some days in my blog to display a notification bar, It’s indeed a good option with so many premium features like detailed traffic analysis and things like that. But it refers to external javascript files, moreover the free version has got some functional restrictions as well. So, I want to make my notification bar to be as simple as it can be with no extra http requests.

so the basic idea is to create a decent looking lightweight pure css top notification bar. No images, no javascript… that means no extra http requests. You will get a fast loading, less bandwidth burning, fully customizable simple menu for free. The notification-bar will load automatically on page load and it can easily be turned off and on anytime.

:target Pseudo Class

This notification bar is created using the css3 feature called :target Pseudo Class. You can read more about CSS pseudo classes and :target pseudo class in one of my previous posts here.

The code in Fiddle

Demo

Before we continue about how to the css/html code, let’s take a look at the fully-functional top-bar here…

The HTML

Copy and paste the below HTML code right after the opening <body> tag

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="topBar" id="notify">
  Your notification message goes here 
 
 
<div class="btnClose"><a href="#notify">X</a></div>
 
 
 
 
<div class="btnOpen"><a href="">notify</a></div>
 
 
</div>

The CSS

Copy and paste the below CSS code inside the <head> section or to the CSS file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.topBar {
	width: 100%;
	height: 23px;
	position:relative;
	top: 0;
	text-align: center;
	border-bottom: 1px solid #fff;
	box-shadow: 0 2px 5px #ccc;
	padding-top: 7px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px; }
.topBar .link {
	padding: 2px 8px;
	background-color: #831e1a;
	color: #fff;
	border-radius: 2px;
	font-size: 12px;
	font-weight: bold; }
.topBar .link:hover {
	background-color: #e62601; }
.btnClose a, .btnOpen a {
	width: 50px;
	position: absolute;
	right: 30px;
	top: -7px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 2px #921d17; }
.btnClose a {
	font-size: 12px;
	line-height: 44px;
	height:25px; }
.btnOpen a {
	font-size: 0;
	border: 1px solid #fff;
	box-shadow: 0 2px 5px #ccc;
	border-top: none;
	border-radius: 0 0 4px 4px; }
.topBar a {
	text-decoration: none; }
.topBar:target {
	top: -36px;
	transition: top 0.4s ease-in; }
.topBar:target .btnOpen a {
	top: 30px;
	height: 30px;
	font-size: 11px;
	line-height: 36px;
	transition-property: top;
	transition-duration: .4s; }
.topBar:target .btnClose {
	display: none; }
.topBar:target .btnOpen a, .topBar {
	background: linear-gradient(top,  rgba(226,87,81,1) 0%,rgba(228,93,86,1) 49%,rgba(213,82,76,1) 50%,rgba(226,87,81,1) 100%); }

Browser Compatibility


This notification bar is fully compatible on all major modern browser versions including IE9.

Internet Explorer Version 6 to 8

The CSS3 pseudo class support can be obtained in Internet Explorer versions 6 to 8 with a cool award winning javascript library called selectivizr. selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest. Selectivizr works automatically so you don’t need any JavaScript knowledge to use it – you won’t even have to modify your style sheets. Just start writing CSS3 selectors and they will work in IE. Selectivizr requires a JavaScript library to work. If your website already uses one of the 7 supported libraries you just need to add the selectivizr script to your pages. If not, you will need to pick a library too.

Downoad

[download id=”10″]

You can use this notification bar for personal and commercial projects at free of charge. What I only expect in return is your comments and backlinks, if you like it. You are not allowed to sell or redistribute this anywhere else. If you like to share this please link to this article.
Do not provide the direct download link nor upload this notification bar onto other servers for your own share, without my permission. If you want to spread the words, just link to this article.

Creative Commons License
Notify: Pure CSS notification bar using :target pseudo class by Deepu Balan is licensed under a Creative Commons Attribution 2.5 India License. Based on a work at deepubalan.com.

Pure CSS DropDown Menu using :target pseudo class

Friday, 17 June, 2011
Pure CSS3 DropDown Menu Using :target Pseudo Class - Free

Today, CSS3 has become a buzzword of modern web designers and developers around the globe. With its ground-breaking features, CSS3 has made a profound impact on the web designer community by making the lives of web designers easier and fun filled. Here in this post I am going to explain such a cool CSS3 feature called :target Pseudo Class. By playing around and experimenting with the :target pseudo class, I have developed a cool looking pure CSS dropdown menu. This menu is developed wholly using CSS and HTML, no images or javascripts used. Hence it is easily customizable for anyone with very basic css/html knowledge.

Before we continue about how to create the menu, let’s take a look at the fully-functional menu here…

CSS Pseudo Classes

CSS pseudo-classes are used to add a special state or relation to a selector. A pseudo class normally starts with a colon (:) and is appended to a type selector or universal selector without any whitespace in between the selector name and the pseudo class. Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. So, in simple words pseudo classes are really helpful to pick a CSS element in its various states.

Syntax

1
selector:pseudo-class { property:value; }

Example

1
a.navigation:hover { color: #ff0000; }

Read the rest of this entry »

Text-overflow CSS3 property explained – Pure CSS solution to get ellipsis

Saturday, 27 November, 2010
css property text-overflow ellipsis explained - cross browser compatible

The introduction of CSS3 brings revolutionary changes to the day-to-day life of web designers. There are so many crazy new features that CSS3 has in store for us. Things which were usually done with complex javascript code can now be easily done with CSS3. One such feature is known as Text-Overflow.

Sometimes through the web design process we may have to clip some dynamic text before it’s being wrapped to the next line of a fixed width box. At the same time we want to provide a visual hint to the user that some text-clipping has been occurred and the text which is being displayed is not complete. The text clipping is usually represented with the ellipsis character (…)

With CSS3 we can easily achieve this using the text-overflow CSS property.

1
text-overflow: ellipsis;

The ellipsis value causes three periods (…) to be appended to the text.

text-overflow: ellipsis comes into play only when:

1. The box has overflow other than visible.
2. The box has white-space: nowrap.

Example


We have a DIV with 150 pixel width to display the company names from the database.
We do not want the values in the company name box to be wrapped to the next line though.
We have to clip the dynamic text beyond the 150 pixel width.
We also want to provide the user with a visual hint that some text-clipping has been occurred and the text which is being displayed is not complete.
We want the entire text to be visible while we mouseover the short text.

Let’s see how this can be achieved with CSS3. Read the rest of this entry »