Delaying the Transition
Going back to our example, transitions can be delayed from the moment the trigger happens on screen. For example, let’s say we wanted the background transition to happen half a second after the link...
Category: CSS3
Explain How flexibility is achieved more in CSS3?
Flexibility achieved is in greater ratio in CSS3 because of the feature of handling multiple style sheets in CSS3 and because of the modularized approach of CSS3.
Better Responsive Images Using Multiple Backgrounds
.bg-image { width: 100%; /* default background-position */ background-position: center center; /* lt ie 8 */ -ms-background-position-x: center; -ms-background-position-y: center; /* scale proportionately */ background-size: cover; /* IE8 workaround – http://louisremi.github.io/background-size-polyfill/ */ -ms-behavior: url(/backgroundsize.min.htc);...
Swapping Out Text, Five Different Ways
It’s a common need in web apps: you click something and the text of the thing you just clicked changes. Perhaps something simple like a “Show” button that swaps to “Hide”, or “Expand Description”...
Centering Percentage Width/Height Elements
If you know the exact width/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick: top and left set to 50% and negative...
How to use fonts using CSS3 with fontface?
The CSS3 @font-face Rule Before CSS3, web designers had to use fonts that were already installed on the user’s computer. With CSS3, web designers can use whatever font he/she likes. When you have found/bought...
CSS3 Transitions
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts. Internet Explorer 10, Firefox, Chrome, and Opera supports the transition property. Safari requires the...
How to use CSS3 Multiple Columns?
CSS3 Multiple Columns With CSS3, you can create multiple columns for laying out text – like in newspapers! In this chapter you will learn about the following multiple column properties: column-count column-gap column-rule Browser...
How to use CSS3 borders?
CSS3 Borders With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border – without using a design program, like Photoshop. In this chapter you will learn...
Web Design: A Guide To CSS3 Pseudo-Classes
The pseudo-classes are used to target elements without having to add extra classes, attributes or ID; that is why it is called in that way, pseudo-class. Throughout our previous posts, we havecovered a few new CSS3 pseudo-classes, including :not, :before and :after, :first-of-typeand we also...
Wrapping Content In Shapes With CSS3
How To Use Shape-Inside The shape-inside allows us to form four shapes: rectangle, circle, polygon, and ellipse, though the shape that seems to work at the moment, is only the polygon. In the following example, we will...
How to make responsive images using CSS and JSON
Current proposed responsive image solutions require that you inline media query values into HTML tags. <picture> <source media=”(min-width: 45em)” src=”large.jpg”> <source media=”(min-width: 18em)” src=”med.jpg”> <source src=”small.jpg”> <img src=”small.jpg” alt=””> </picture> This is a problem...
CSS Interview Questions and Answers -13
Border around a table? Try the following: .tblboda { border-width: 1px; border-style: solid; border-color: #CCCCCC; } /*color, thickness and style can be altered*/ You put this style declaration either in an external stylesheet, or...
CSS Interview Questions and Answers -12
What is value? Value is a ‘physical’ characteristic of the property. Property declares what should be formatted, e.g. FONT while value suggests how the property should be formatted, e.g. 12pt. By setting the value...
How to Replace the Image in an ‘img’ with CSS?
I just wanted to share something I found really cool about using CSS box-sizing. Chris wrote a really good introduction a few years back if you’re not familiar with the property. It makes things a lot more...
How to Insert a Div Tag?How to Insert a Div Tag
Hypertext Markup Language employs a number of elements used for creating different sections in a Web page to form a layout; one of them is a div tag (<div>). Div tags are used to...
How to Center a Web Page Without CSS?
Hypertext Markup Language (HTML) was created to give content providers a way to display information on the World Wide Web in a organized and structured manner. HTML’s limited ability to format and style information...
What is the Differences Between CSS & CSS3 ?
Cascading Style Sheets, known as “CSS,” is a Web design language that is used to control the look and feel of Web pages. CSS files are created separate from the Web pages during the...
How to put Exactly Center an Image/Div Horizontally and Vertically?
.center { width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; } Negative margins are exactly half the height and width, which pull the element back into perfect center....
Expanding Boxes Navigation using CSS3
nav { background: #444; border-bottom: 8px solid #E6E2DF; overflow: hidden; position: relative; width: 100%; } nav:after { content: “”; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: white; } nav ul...
How to create Multiple Borders to an image with CSS3?
The element needing multiple borders should have its own border and relative positioning. #borders { position: relative; border: 5px solid #f00; } The secondary border is added with a pseudo element. It is set...
How to create Page Curl Shadows using CSS3?
ul.box { position: relative; z-index: 1; /* prevent shadows falling behind containers with backgrounds */ overflow: hidden; list-style: none; margin: 0; padding: 0; } ul.box li { position: relative; float: left; width: 250px; height:...
Preventing the Performance Hit from Custom Fonts
The issue is 1) custom fonts are awesome and we want to use them 2) custom fonts slow down our pages by being large additional resources. Dealing with this has been in the air...
How to get Magic Numbers in CSS?
Despite the super fun sounding name, magic numbers are a bad thing. It is an old school programming term for “unnamed numerical constant”. As in, just some number plunked into the code that is probably vital...
How to write Style Placeholder Text?
Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you’ll need vendor prefix CSS properties. ::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox...
How to Turn Off Number Input Spinners?
WebKit desktop browsers add little up down arrows to number inputs called spinners. You can turn them off visually like this: input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
How to get Transparent Inside Border?
HTMl <div class=”inner-border”> Transparent Inside Border </div> CSS .inner-border { background: #000; color: #fff; margin: 50px; padding: 15px; position: relative; } .inner-border:before { border: 5px solid #000; content: “”; position: absolute; top: -10px; bottom:...
How to get Gradient Underlines?
a { position: relative; padding-bottom: 6px; } a:hover::after{ content: “”; position: absolute; bottom: 2px; left: 0; height: 1px; width: 100%; background: #444; background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(50%,#444), color-stop(100%,transparent)); background: -webkit-linear-gradient(left, transparent...
How to create Gradient Text with CSS3?
This is WebKit only, but is the cleanest way to accomplish it as the text remains editable and selectable web text. h1 { font-size: 72px; background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
How to make Transitional Interfaces, Coded using CSS3
It’s a quick read that that drives home a great point. Transitions and animations can be more than eye candy. They can help give your brain a clue about what is happening on a...