Do you know the difference between single and double colon notation in CSS? “there are now two formats to remember instead of one… some only work with ::, some work with both, now beginner devs need to understand pseudo-classes and pseudo-elements being different terms” Check out the history: Know your […]
Tag: CSS
5 Things You Can Do Today To Clean Up Your Code
Cleaning up your files can be a daunting project. However, there are some easy ways to clean code. This is a list of smaller clean up tasks that can each be completed in a few minutes. Depending on your time constraints and the current state of your files, you can […]
Getting In-Depth With CSS Media Queries
Why min-width instead of max-width? Let’s say you designed your site when the iPhone 5 was first released. You used max-width: 320px for your iPhone/mobile style. Months later, the iPhone 6 is released and now your CSS needs updated to have another max-width media query, or else the iPhone 6 […]
Intro to Media Queries and Responsive Design
What are CSS Media Queries? W3 Schools has a good definition: The @media rule is used to define different style rules for different media types/devices. In CSS2 this was called media types, while in CSS3 it is called media queries. Media queries look at the capability of the device, and […]
Faux-Cropping Circles with CSS Using background-image
As promised, here is another approach to “cropping” images in CSS circles. It looks almost identical to the other fiddle, but is done a different way. This method is better than the one I described in my previous Snippet Sunday in that the images are actually centered (without the use […]
Faux-Cropping Circles with CSS
Here’s a basic jsfiddle I made to illustrate how to crop an image with a CSS circle. Gone are the days of editing photos for this effect (thank goodness). I’m using negative margins to faux-center the images. (Check back next week to see another method of cropping that doesn’t use […]
Cool SCSS Animation
I was browsing CodePen and found this pen by Jamie Caballero. What comes as a surprise to me is that it isn’t using any JavaScript. The animations are all done in SCSS, which is a CSS preprocessor. It is also using Haml, which is a markup language that stands for […]