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. If you haven’t yet started learning the syntax for CSS3 animations, here’s your chance to prepare for when this part of the CSS3 spec moves past the working draft2 stage. 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 (NOTE: Versions of Safari prior to 5.1 have a bug that prevents the animation from finishing correctly. 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 border-width property. Useful :nth-child Recipes. Share this: Ship custom analytics today with Keen.io.
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.
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.. When to use margin vs padding in CSS. Solving the CSS Padding Problem. 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: <! 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. CSS overflow property. Playit. Display CSS property. Position CSS property.