The Shapes of CSS. Learn Development at Frontend Masters CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals. We also get the ::before and ::after pseudo elements in CSS, which give us the potential of two more shapes we can add to the original element. Square Rectangle Circle Oval Triangle Up Triangle Down Triangle Left Triangle Right Triangle Top Left Triangle Top Right Triangle Bottom Left Triangle Bottom Right Curved Tail Arrow via Ando Razafimandimby Trapezoid Parallelogram Star (6-points) Star (5-points) via Kit MacAllister Pentagon Hexagon Octagon Heart via Nicolas Gallagher Infinity via Nicolas Gallagher Diamond Square via Joseph Silber Diamond Shield via Joseph Silber Diamond Narrow via Joseph Silber Cut Diamond via Alexander Futekov Egg Pac-Man Talk Bubble TV Screen Lock.
An Introduction To CSS3 Keyframe Animations. Advertisement By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module1 in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design. Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. It’s just another way that CSS3 is helping to solve a real-world problem in an elegant manner. In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it. A Simple Animated Landscape Scene For the purpose of this article, I’ve created a simple animated landscape scene to introduce the various aspects of the syntax. (NOTE: Versions of Safari prior to 5.1 have a bug that prevents the animation from finishing correctly.
The @keyframes At-Rule Here’s the @ rule we’ll be using: Shorthand. CSS3 @keyframes Rule. An Introduction To CSS3 Keyframe Animations. Starting to Write CSS. Don't you feel that CSS is not the same anymore? Last few years became a hot topic and many smart people talked about it. CSS is not that little thing which front-end developer should do to make the page looks pretty. It's far more then that. We care about performance and we want to produce better web sites. CSS Preprocessors Ok, let's face it. Concatenation I think that one of the most valuable thing which came is the concatenation of your files.
Extending There are two main CSS preprocessors - LESS and SASS. The problem here is that if you define a mixin without parameters i.e. if you have just this goes to the final compiled CSS file, no matter if it is used or not. It looks almost the same. There are two good things happening. Configuration Both LESS and SASS support definition of variables. That's a good feature, because you may store some important things like company colors or grid widths in one place. Another handy usage of the variables is interpolation. Against the preprocessors or. CSS border-width property. Useful :nth-child Recipes. I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have!
In these simple “recipes” (really: expressions) I’ll arbitrarily use a flat list of list items and randomly chosen numbers. But it should be fairly obvious how to alter them to get similar selections. Select Only the Fifth Element To select the first element, you can use :first-child, or I bet you can guess how to alter the above to do it as well. Select All But The First Five If there were more than 10 elements here, it would select all of them beyond 5. Select Only The First Five Select Every Fourth, Starting At The First Select Only Odd or Even Select The Last Element Selects the 10th because we have 10 elements here, but if there was 8 it would select the 8th, or if there were 1,290 it would select the 1,290th. Select the Second to Last Element Wanna play? Try the tester. Browser Support. Perfectly Positioned Plusses. Ever seen those thumbnails which, when hovered over, reveal an icon in the middle to suggest what's about to happen?
Ever wondered how the effect is achieved? Ever tried, but didn't manage to get the icons dead center, especially when your thumbnails weren't of fixed dimensions? Then this Quick Tip is for you.. I'm talking about thumbnails which you might click to trigger a lightbox, or perhaps a thumbnail which links to a portfolio piece. In any case, it's a great addition to your site's usability if you can suggest what's about to happen when someone hovers over a thumbnail. This Quick Tip is aimed at those of you who have an understanding of CSS, have more-or-less figured out what positioning is about, and are looking for the perfect excuse to put it to use..
Step 1: Starting Block Let's quickly throw some documents together to demonstrate what I'm talking about. Then we'll begin our styles.css file with some reset rules. Step 2: Images It's time to add some images to the mix. Hmm. When to use margin vs padding in CSS. Solving the CSS Padding Problem | TutWow. I remember when I first started using CSS, something really ticked me off. That was that when I had an HTML file with a div in it, and I wanted to add some padding to that div, not only did the content inside of the div get “padded”, but the whole div increased in size.
As you can imagine, this got really annoying, until one day I found the solution to the problem. Let’s start with an example of the problem. If I have the following HTML code: <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xmlns=" lang="en" xml:lang="en"><head><title>CSS Padding Problem</title><link rel="stylesheet" href="style.css" media="all" /></head><body><div id="padded">I want this content to be padded. And the following CSS: Then I will get this result.
And in a web browser, the result of that change would look like this file. By now you might be thinking “So what? So how do we fix this problem? <! And the new CSS file: CSS overflow property. Playit. Display CSS property. Position CSS property.