Pixels to Ems Conversion Table for CSS A companion reference to the article, The Incredible Em and Elastic Layouts With CSS. The em values in the table assume that the generic browser default setting of 16px font size has not being changed. It also assumes that the <body> has font size set to 1em or 100%. Formula to calculate em equivalent for any pixel value required 1 ÷ parent font size (px) × required pixels = em equivalent Example: 770px wide, centred elastic layout using CSS and ems N.B. 1 ÷ 16 × 770 = 48.125em <html><body><div> … </div></body></html> *I deliberately hooked the formula for the tutorial around 1px, as a value that designers can easily relate to. Required element pixel value ÷ parent font size in pixels = em value So, our required width of 770px in ems can be calculated like this:
A CSS workflow for digital activists - Notes on digital activism If you build campaign sites, you’ll want them to have a branded look consistent with the campaign design. And that means you (or someone else) has to design the site and create the Cascading Style Sheets (CSS) files. If you know some CSS and you want to do it, but you are not a front-end developer, this article is for you. Start from a framework or base theme Today is not very smart to start coding CSS from scratch. Use a good text editor Although there’s some IDE’s to develop CSS, I prefer to use a simpler text editor with colored code, autocomplete and error warnings. Use a version control system To be able to go back to a previous version or see my progress I use a version control system. Develop and debug on the browser It’s fundamental to use a browser developer tool. Use CSS generators Certain advanced CSS3 proprieties are not easy to get right and we can achieve better results with a CSS generator. Validate your CSS Test your CSS in different browsers Concatenate and compress your CSS
CSS 3D Editor Tridiv Making 3D in CSS has never been easier Tweet Tridiv is a web-based editor for creating 3D shapes in CSS. Start using the app See examples Examples iPhone 4S 8 shapes, 148 faces NES 21 shapes, 124 faces Xwing ⚠ 47 shapes, 297 faces Concept, code and design by Julian Garnier.
» CSS Workflow Tips from the Front-end Design Conference My next entry for the Front-end design conference series is on Jina Bolton’s presentation “ CSS Workflow ” . Jina Bolton runs the popular site Sushi and Robots and is also one of the authors of the CSS book “ The Art & Science of CSS ”. “ Does workflow really matter that much? ” Yes. Jina explains how good workflow gives us more time to be creative. Good Workflow = Good Design Good Workflow = Good Development Good Workflow = Good Business Having a good workflow improves the quality of our results while keeps us from working crazy late hours. File Systems The next area is about file systems, and how programmers organize their web site asset directories. css/img/ img/ js/ swf/ php/ The example above shows us how we can store images used in the style sheets within the CSS directory within a child image directory. This example above may not be for you, or you may have a version of the above with a few tweaks; either way you should create a workflow and stick to it. Meaningful Markup Example:
After: float Continuing in my series of “why is this so hard in CSS or HTML?” type articles, here I want to discuss the process of dealing with floated elements. Before I get started, let me just disclaim: I’m not talking here about using CSS float as an approximation forlayout structure, things like columns. In this other article, I cover what the differences are, IMO, between layout and positioning. With that distinction in my mind, I will be talking here about positioning using floats, floating an element (left or right), with other inline content (text, images) flowing around it. But we’re not talking about layout structuring here. What’s the floating problem? Put simply, if you want to take an element and float it around some other content, that floated element no longer takes up any vertical space, so if it happens to be bigger than the container would otherwise be sized by its other content, then it overflows, rather than stretching the parent. Example: Very cool! Hello, this is some text The “fix”
45 High-Quality Free HTML/CSS Templates from 2011 and 2012 Looking for free HTML/CSS templates that you can use to practice your skills or to convert a WordPress theme? You came to the right place! In this roundup, we have gathered 45 CSS templates from 2011 to present. We know that not everyone has the time to design and code, but there is definitely a growing need for visually appealing templates. Visually appealing designs? Free and fresh templates? What are you waiting for? Build Flat Responsive Website from Scratch – Complete Course What Can HTML/CSS Templates Do? For starters, CSS templates are a thing of beauty, especially when they’re free, since developers can actually make use of them without having the need to find a designer, or design one. It goes like this: Design is made using Photoshop (or other Photoshop Alternatives)File is converted to HTML/CSSDeveloper converts HTML/CSS template into a fully-functional and feature-loaded website Want to Learn How to Build One? Click the image above for the demo. Making Things Responsive 1. 2. 3.
Flexible Google-style loader with CSS So, for a while I had noticed the nice sutble loader Google apps use and I was wondering if it would be easy to make with CSS and CSS animations: Yesterday, I realised that you can get this effect by increasing border size until about the middle of the element, as long as the total width stays the same (by using box-sizing: border-box): However, as you can see above, after the midpoint, the border is not curved any more, so does not produce the desired effect. This is the finished result: The dimensions are all set in ems so that you can change the size in one place: Just change the font-size and the loader scales perfectly. And yes, it’s not super useful as-is, there are tons of spinners on the Web that you can use instead.
How to optimize your CSS Keeping your CSS files small and organized is very important, especially if you’re going to spend any time editing your site in the future, (or if others are gonna be using the code i.e. clients). Helpfully, there are a number of different techniques which can be utilized to aid organization and size of your CSS files in order to make them more streamline. Having more streamlined CSS will save you time and stress in the long run so it’s important to get it right. Firstly, keeping a single stylesheet, normally named style.css, is a good place to start in the organization of your CSS. Code in Style In order to keep your CSS files more streamline it is important to start by using a good code editor, such as TextWrangler on Mac, or Notepad++ on Windows. To further streamline your CSS files it is a good idea to establish a set layout that is used throughout all your CSS stylesheets. By following this commonly used technique your stylesheet will be more organized and easier to code. CSS Comments
Animatable: One property, two values, endless possiblities box-shadow From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou 70 Expert Ideas For Better CSS Coding Advertisement CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. We’ve taken a close look at some of the most useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. And what has come out of it is an overview of over 70 expert CSS ideas which can improve your efficiency of CSS coding. We’d like to express sincere gratitude to all designers who shared their ideas, techniques, methods, knowledge and experience with their readers. You might be interested in reading our article 53 CSS-Techniques You Couldn’t Live Without1, which should provide you with a basic toolbox for CSS-based techniques you might use in your next projects. Update (29/05/2007): Brazilian-Portuguese translation of the article2 is also available. 1.1. 1.2. 1.3. Keep containers to a minimum. 1.4.
Creating Different CSS3 Box Shadows Effects In this tutorial we are going to be creating box shadow effects with just CSS. Below is an image created in photoshop of different box shadows effects. These used to be the only way of creating this effect but thanks to CSS3 we can now do all this with just CSS. View Demo page to see what we are going to create CSS Box Shadow Effects Demo CSS Box Shadow We are going to be using the CSS box shadow property which is one my favourite CSS properties which you will see in this tutorial how easy you can use it. The box-shadow property allows you to easily create multiple drop shadows on box elements by specifying values for colour, size, blur and offset. The box-shadow property accepts 2-6 options, the required options are horizontal offset and vertical offset, the two optional options are spread distance and colour. box-shadow: inset horizontal vertical blur spread colour; Examples Browser Support All of the major newest browsers support box-shadow property. The box-shadow property is no different.
5 Ways to Instantly Write Better CSS Sure, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours. 1. Seriously, always use a reset of some sort. It can be as simple as removing the margin and padding from all elements: The Eric Meyer and YUI Resets are awesome, but to me, they just go too far. Oh and please, stop this: It takes more time to process, and what do you think should happen to a radio button when you remove the padding? 2. A Little Quiz Which example would you think is faster to find the margin-right property? Example 1 Example 2 You can’t tell me that Example 2 isn’t faster. I know some people who organize one way and others who organize another, but at my company, we made a consensus decision to all organize alphabetically. 3. You should organize your stylesheet so that it is easy to find things and related items are close together. By using comments and grouping similar elements, it becomes much quicker to find what you are looking for. 4. 5.