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: CSS
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);...
Different Ways To Format CSS
Formatting has nothing whatsoever to do with how the CSS functions. These are merely aesthetic choices by the coder. But that’s not to say formatting isn’t important. That would be like saying the choice...
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...
CSS Interview Questions and Answers -09
How do I make my div 100% height? You need to know what the 100% is of, so the parent div must have a height set. One problem that people often come up against...
CSS Interview Questions and Answers -08
How do I have a non-tiling (non-repeating) background image? With CSS, you can use the background-repeat property. The background repeat can be included in the shorthand background property, as in this example: body {...
CSS Interview Questions and Answers -07
How do I get rid of the gap under my image? Images are inline elements, which means they are treated in the same way as text. Most people kind of know this – they...
CSS Interview Questions and Answers -06
Why call the subtended angle a “pixel”, instead of something else (e.g. “subangle”)? In most cases, a CSS pixel will be equal to a device pixel. But, as you point out, the definition of...
CSS Interview Questions and Answers -05
How do I combine multiple sheets into one? To combine multiple/partial style sheets into one set the TITLE attribute taking one and the same value to the LINK element. The combined style will apply...
CSS Interview Questions and Answers -03
Why do style sheets exist? SGML (of which HTML is a derivative) was meant to be a device-independent method for conveying a document’s structural and semantic content (its meaning.) It was never meant to...
CSS Interview Questions and Answers -02
Three selectors: h1, .warning and #footer, what they do ? An element points at a HTML-tag somewhere on your page. In the example above we want to style the <h1>-tag. Note that using an...
CSS Interview Questions and Answers
What is CSS? 1. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. Every element type as well as every occurrence of a specific...
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...