Prism CSS media queries - Web developer guide A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself. Syntax Media queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Unless you use the not or only operators, the media type is optional and the all type will be implied. Logical operators and @media (min-width: 700px) { ... } comma-separated lists not only
"Old" Flexbox and "New" Flexbox Just so everyone is clear on this: "Flexbox" (more specifically: CSS Flexible Box Layout Module) has undergone a lot of changes in the last three years. Changes both to the spec and what browsers have implemented. How To Tell If you Google around about Flexbox, you will find lots of outdated information. Here's how you can quickly tell: If you are looking at a blog post (or whatever) about Flexbox and you see display: box; or a property that is box-{*}, you are looking at the old 2009 version of Flexbox. If you are looking at a blog post (or whatever) about Flexbox and you see display: flexbox; or the flex() function, you are looking at an awkward tweener phase in 2011. If you are looking at a blog post (or whatever) about Flexbox and you see display: flex; and flex-{*} properties, you are looking at the current (as of this writing) specification. Examples of Outdated Stuff All this stuff was fantastic at the time it was created, but now is outdated: Support Demo Example of OLD syntax Share On
Learning Principles for Improving Your CSS This article will cover some basic principles and tips on how to learn and become better at CSS, based on personal experience. In today’s article I will mostly talk about my own experience, and what I have learned about CSS after almost one year and a half of heavy practicing. First, let me remind you that CSS is an extremely simple language. It can be summed up in 3 words: selector, property, value. Nothing more, really. Yup. But the fact that CSS is an easy language doesn’t mean everyone is on the same level. From what I can tell, I’ve been playing around with CSS for almost two years now and on what I would call a heavy level for something like 7 months. Anyway, there are a few things I understood over the months and I’d like to share them with you. What do you say? 1. Don’t rush your code This is more like a general advice, it’s not specific to CSS. How would I do this? Rushing into the code may lead to time loss. Keep it simple Pick the simplest and set the list elements to inline. 2.
3D Transforms & More CSS3 Goodies Arrive in GSAP JS GSAP's CSSPlugin is now super-charged to handle some slick new CSS3 properties like 3D transforms, boxShadow, textShadow, borderRadius and clip. Plus you don't need to worry about a litany of vendor prefixes. GSAP makes it easy to create next-generation effects today. 3D transforms textShadow boxShadow borderRadius clip -moz- -o- -webkit- -ms- -no-more- These features work in virtually all modern-day browsers (see caniuse.com for details about browser support for each feature). 3D Transforms Browser support: GOOD (Chrome 12, Safari 4, Firefox 10, IE 10, iOS 3.2, Android 3.0) see details GSAP makes it a breeze to create amazing 3D effects. In order to get the most out of these 3D properties, it's important to understand how perspective and transformPerspective work. transformPerspective affects only the element that is being animated, making it look as though it has its own distinct vanishing point in its own 3D space. no transformPerspective No visual distortion at all. Caveats: textShadow clip
Readable CSS - Web developer guide Go to Previous Section:SelectorsThis is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable. Information: Readable CSS You can add white space and comments to your stylesheets to make them more readable. White space White space means actual spaces, tabs and new lines. In the context of page layout and composition, white space is the portion of a page that is left unmarked: margins, gutters, and space between columns and lines of type. Your sample CSS file currently has one rule per line, and almost the minimum of white space. The layout you choose is usually a personal preference, but if your stylesheets are part of shared projects, those projects might have their own conventions. Examples Some people like the compact layout that we have been using, only splitting a line when it becomes very long: Some people prefer one property-value per line: Example
Animenu - a responsive dropdown navigation made with SASS Check out the Animenu GitHub repository for the updated version of this dropdown navigation concept. I’ve been pretty happy lately to see I’m still receiving a lot of positive feedback on my animated dropdown menu. I found that quite encouraging and I decided to start working on an improved version of it using SASS & Compass. View demo or download the .zip from GitHub Some words on this project Some of the decisions I had to take on this new improved dropdown navigation were on the browser support and number of levels this menu will support. But, this time the accent is put on responsiveness. Browser support The browser support for this dropdown navigation is IE8+, so it uses the new box model triggered by box-sizing: border-box and the shortest clearfix ever. One dropdown level For a better user experience and to avoid usability issues, in my opinion one dropdown level is more than enough for a navigation menu. The markup As you may have guessed, there’s nothing complicated here. Variables
Border CSS Border, our personal favorite CSS attribute, allow you to completely customize the borders that appear around HTML elements. With HTML, it used to be impossible to place a border around an element, except for the table. CSS Borders let you create crisp, customized border styles with very little work, compared to the antiquated methods of HTML. There are numerous types of border styles at your disposal. CSS Code: Display: This is a solid border This is a double border This is a grooved border This is a dotted border This is a dashed border This is an inset border This is an outset border This is a ridged border This is a hidden border This is probably obvious, but the default border-style setting for an element is hidden. To alter the thickness of your border use the border-width attribute. This paragraph has a solid border with a "thick" width. Now for the creative aspect of CSS Borders! This paragraph has a solid border with a color of "blue". This only has a bottom border Try it out!
Heading Set Styling with CSS We choose to go to the moon. We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win, and the others, too. This is a simple title of level 2 The surface is fine and powdery. I can kick it up loosely with my toe. It does adhere in fine layers, like powdered charcoal, to the sole and sides of my boots. Another one First, I believe that this nation should commit itself to achieving the goal, before this decade is out, of landing a man on the moon and returning him safely to the earth. This one goes deeper A good rule for rocket experimenters to follow is this: always assume that it will explode. Even deeper And a level-3 title again It has been said that astronomy is a humbling and character-building experience.
Mastering CSS Coding: Getting Started Advertisement CSS has become the standard for building websites in today’s industry. Whether you are a hardcore developer or designer, you should be familiar with it. CSS is the bridge between programming and design, and any Web professional must have some general knowledge of it. Overview: What We Will Cover Today We’ll start with what you could call the fundamental properties and capabilities of CSS, ones that we commonly use to build CSS-based websites: Once you are comfortable with the basics, we will kick it up a notch with some neat tricks to build your CSS website from scratch and make some enhancements to it. 1. Most beginners get padding11 and margins12 mixed up and use them incorrectly. What Is Padding and Margin? Padding is the inner space of an element, and margin is the outer space of an element. The difference becomes clear once you apply backgrounds and borders to an element. Take a look at the visual below: Margin and padding values are set clockwise, starting from the top. 2.
CSS Button Switches with Checkboxes and CSS3 Fanciness In this tutorial we will create some realistic-looking switch buttons using pseudo-elements and checkboxes. View demo Download source Hello everyone! For a while now, I’m having fun with the new CSS properties (CSS3). You won’t see any vendor prefixes in the CSS snippets, but you will of course find them in the files.We won’t use much transitions between states because we often use pseudo-elements to reduce the number of elements to its minimum, and as of writing, only Firefox supports transitions/animations on pseudo-elements.We’ll use the “checkbox hack” (see below).I personally use the box-model where [width] = [element-width] + [padding] + [borders]. About the “Checkbox Hack” The checkbox hack allows us to have a toggle handler in pure CSS. Example 1 Let’s start with a lovely little push button, with a small illuminated LED when it’s on. The Markup The .switch element is our container. The CSS First, we give our button a size by setting the width and height to the container. Example 2