Go to books ↓
Every new developer inevitably finds that centering a div isn't as obvious as you'd expect. Centering what's inside a div is easy enough by giving the text-align property a value of center, but then things tend to get a bit sticky. When you get to centering a div vertically, you can end up in a world of CSS hurt.
A wide range of topics, tips, tricks and the ins-and-outs of working with the Bootstrap library and CSS framework with Asp.Net’s MVC Framework.
I can’t actually guarantee that statement, but there is a very good chance you haven’t come across or used the following…
An Image Sprite is a Collection of images compiled or put together in a Single image. The process of compiling images together does not necessarily benefit a web developer, but it definitely gives a tremendous boost to user experience by delivering or serving the graphic filled web page much quicker than usual.
If you mention printing with CSS to many people who work on the web, print style sheets are the use that comes to mind. We are all well used to creating a style sheet that is called upon when a web document is printed. These style sheets ensure that the print version is legible and that we don’t cause a user to print out huge images. However, CSS is also being used to format books, catalogs and brochures — content that may never have been designed to be a web page at all.
"I recenly came across posts on Reddit and DesignerNews that were talking about CSS Puns, there were some really good ones in there. I have collected them and shared them with you in here."
Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps.
Did you know that we can hardware-accelerate graphics-intensive CSS features by offloading them to the GPU (Graphics Processing Unit) for better rendering performance in the browser?
The web has typically been a place of boxes and rectangles but an emerging CSS specification is going to change that.
Some days, writing plain ole everyday CSS can get a little monotonous. It’s all margins, font-families, positions and displays day-in and day-out.
Learning about CSS specificity will give you a deeper understanding of how CSS property values are resolved.
The CSS 2 specification did not address the problem of how form elements should be presented to users. Because these elements are part of the UI of every Web document, the specification’s authors preferred to leave the visual layout of such elements to the default style sheet of Web browsers.
I guess you have used the float property a couple times. And I bet you wondered about some of its weird behavior, too. “How Floating Works” provides a very visual and clear explanation of floated element behavior.
The CSS power couple. When used together, these properties allow you to create simple animations and add valuable interaction and visual feedback for your users.
“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”
Since the documentation process is often the weakest spot for modern web teams, we’re constantly looking for the right tools to help us.
An interactive tour of all the major features of the new CSS property: flexbox
CSS is an unstructured language. Everything can be accomplished in twenty-five different ways. (And if you’re part of a team: everything will be accomplished in twenty-five different ways.) The biggest problem is arguably CSS’s biggest selling point: there’s a quick fix for every problem. Just put a new rule at the end, upping the selector’s specificity a bit.
The web consists of content, content consists of words and words can be long, very long. Everyone involved with the web will sooner or later have to deal with long words.
Unlike their musical counterparts, named for the “Rapid Eye Movement” during deep sleep, in CSS rem stands for “root em”. They won’t make you lose your religion nor believe in a man on the moon. What they can do is help you achieve a harmonious and balanced design.
A user interface control not only needs to look like a certain control, it must be described as that control too.
When you want your CSS to be reusable, how do you have several people working in git branches on different pages without writing completely separate styles?
Much like baking a Christmas cake, designing for the web involves creating an experience in layers. Starting with a solid base that provides the core experience (the fruit cake), we can add further layers, each adding refinement (the marzipan) and delight (the icing).
As web designers and developers, one of our primary goals is to bring focus to content and make it easy for our visitors to navigate that content. To accomplish this goal, we need a functioning layout where technology gets out of the way and the content becomes the hero.
Using CSS to style our React content is actually as straightforward as you can imagine it to be. Because React ends up spitting out regular HTML tags, all of the various CSS tricks you've learned over the years to style HTML still apply. There are just a few minor things to keep in mind.
Excitement about native CSS Custom Properties is generally tempered by the incorrect comparison to variables used in preprocessors like Sass or LESS.
Why, exactly, does our CSS abuse classes so mercilessly, and why do we litter our markup with author-defined classes? Why can’t our CSS be as semantic and meaningful as our markup? Why can’t both be more semantic and meaningful, moving forward in tandem?
If CSS is not the primary language you write, debugging CSS may currently feel like a dark art; following this guidance may help you isolate and deal with CSS bugs more effectively.
What all can you do with a single div element using pure CSS?
Few things are as annoying on the web as having the page layout unexpectedly change or shift while you're trying to view or interact with it.
The new CSS Containment property lets developers limit the scope of the browser’s styles, layout and paint work.
Animating elements in your mobile applications is easy. Animating elements in your mobile applications properly may be easy, too… if you follow our tips here.
Master the fundamentals of CSS positioning with this interactive tutorial
An introduction to CSS architecture that will help you design a structure for your code so your projects and teams can grow without becoming an unmanageable mess.
This one’s for the absolute beginners. Once you’ve learned how the box model works, and how to float those boxes, it’s time to get serious about your CSS. To that end, we’ve compiled a massive list of tips, tricks, techniques, and the occasional dirty hack to help you build the design you want.
CSS takes literally no skill to code. And that is absolutely true, styling one element at a global level with no other CSS to worry about is easy.
If you have ever seen a car dealership, then you can understand CSS selectors.
This article will cover all the fundamental concepts you need to get good with the CSS Flexbox model.
CSS has a long history of providing frustrating and nonsensical solutions to the simplest problems of front-end design, while thoughtfully implementing one-line features to solve problems nobody cares about.
The most interesting thing I learned reading the spec was exactly how un-thorough my understanding was, despite the half-dozen or so blog posts I’d read, and how relatively simple flexbox is. It turns out that ‘experience’ isn’t just doing the same thing over and over for years on end.
This is a real worry these days. I've heard it from lots of lots of developers. The years tick by on their projects, and all they ever seem to do is add to their CSS, never remove. It's not just a feeling, I've talked with companies before that track hard data on this. Over five years of tracking the size of their stylesheet, and all it's ever done is tick upwards in size.
What’s the best way to understand Flexbox? Learn the fundamentals, then build lots of stuff. And that’s exactly what we’re going to do in this article.
A high level guide for designers and developers who write CSS, but want to be more strategic about building moderate to large scale CSS systems