css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Posts tagged scss

CSS-only Loading Animation

Es gibt mehrere Wege, Lade-Animationen in Projekte einzubauen. Der Klassiker ist das animierte GIF oder APNG, um eine bessere Transparenz zu ermöglichen. Auch kann man animierte SVG verwenden. Der...

The Unexpected @extended

Recently I ran into a nasty SCSS surprise. A single line of SCSS code that I inserted into my stylesheet bloated the output by almost 3x, taking it from 126kb to 379kb. Needless to say I was a bit...

Creating a Sass Theme Engine

Late last year, I was working on a project that required some elements of the page to be "theme-able" to match different live events being represented. Some background colors on...

CSS Border Emboss (SCSS mixin)

Emboss effect

For emboss effect we need 3 borders (Base Border, Inner Border, Outer Border) and 3 colors for diagonal light direction (4 colors for vertical light direction).

Imagine that we have...

Flexbox Grid with SCSS Mixins

There are plenty of great articles about there about using Flexbox for gridding up your web pages. I have been a progressive enhancement disciple and have been using display: flex for a number of...

Sass Color Maps

Naming things is tough. I find naming Sass color variables to be particularly problematic.

Consider the following:

  $red: #ff0000; 

Many might consider this to be a poorly named variable. What if...

Plug and Play Flips

Show and Tell them with this simple effect. Flips are an easy way to enhance your achievements or collectables.


What we're after

Simple Card Flip

Cool...

Responsive Sass grids without the bloat

I’m going to make an assumption right off the bat. You’ve used a framework’s grid before. Be it Bootstrap, Semantic-UI, Foundation…whatever the case may be. Have you ever needed to go in and remove...

SCSS: Want a customisable grid in 35 lines?

As the title says... do you want a customisable grid in 35 lines of SCSS?

Well here you go!. Mainly the purpose of this was to demonstrate a small portion of the power of SCSS. Defining variables,...

CSS Background-Image Hover Effects

Getting the CSS Hover to Work was Fun!


KdjEQq

It works by using a combination of rgba and opacity, which gives us access to two different layers...

#2. Caniuse in the Terminal and SaSS vs Scss

Caniuse-cmd

Kat had checked out a new command line tool which pulls data from www.caniuse.com so you can easily find out browser compatibility in the command window. They have a pretty great tag...

Responsive tables, mobile first and no JS

I was challenged by a client project to build properly responsive tables - that is, tables that had a fairly different design when running mobile than desktop, but remaining smoothly adaptive. And...

Simple grid with Sass & Flexbox

A simple and quick guide to create a grid system. I like the idea of grids-on-demand, rather than a strict framework -no matter how simple-. So I started thinking (with my buddy Nico Gonzalvez)...

CSS Proportional Resizable Boxes

In this article I will explain how to define boxes of variable size but preserve the aspect ratio (without using JavaScript). A while ago I had the need to create a grid with multiple square boxes...

Don't build a Bootstrap style grid-system with Flexbox.

Firstly I'd like to point out that I'm not here to bash Bootstrap, in fact the opposite. This post details some lessons I've learnt from using Bootstrap, Flexbox and building...

Using SCSS to achieve vertical rhythm

Vertical rhythm is a typography concept to make a page easier to read. There are already a lot of posts explaining this: have a look here or here or here.

Implementing the correct sizes to...

Maintainable CSS based on SCSS

Introduction

I've been working with SCSS for quite some time now and can't code without it anymore. The main reason I'm using it is because of the ability to have seperate files, each...

Triforce

I Can Triforce

I thought I couldn't for a second there. Would have been a funnier joke.

I was working through Sean Fioritto's Sketching With CSS tonight and thought I could probably do...

Truncate a String in CSS

  .whatever { max-width: [?]px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* optional */ } 

Smarter Sass Media Queries

_mixins.scss:

  $retina-display: '(-webkit-min-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (min--moz-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3)'; $breakpoints:...

Minecraft in SCSS

I love Minecraft. Almost as much as I love web development. The other day I saw a beautiful low-poly CodePen someone made in SASS, and naturally I looked at the code and saw that it was made in...

What's so sassy about SCSS?

What’s so sassy about SCSS?

By Bill Searle — (Front-end Developer)

So you’ve been writing Cascading Style Sheets (CSS) and heard about SCSS? Well it was only a matter of time. If you’re...

Understanding @each in SASS

The helpful @each !

I've recently used this method at work because save me a lot of time and I know that some of you will find it banal but i wont to explain this awesome concept for the pepole...

Simple physics using basic web techniques

I've always been a sucker for basic physics. You know, the stuff introduced in elementary school, teaching us how physical objects can react and interact with the world around it. Recreating...

A Beginner’s Guide to Pure CSS Images

Update (3/14/17) We have also released a 100% free email course for learning pure CSS images. You can enroll here. You can sign up here.

Update (1/6/17) I have since released a 50 day email...

Prepending <body> Classes to Nested Selectors with Sass Mixin

The Problem

It always feels a little hacky, but sometimes you need to control document-wide styles by adding a special class to the <body> element. A good example is a no-touch class, which...

On BEM

Introduction

A lot has been written on the topic of writing modular, re-usable and scalable CSS. This is my take on it. In this short post I'm focussing on the BEM methodology because from my...

Doing BEM right with SCSS / LESS

We have many ways of selecting BEM elements with SCSS and LESS.
It is also all too easy to abuse BEM when using a CSS preprocessor.

To my knowledge, there are two types of frontenders:

The ones...

BEM with CSS/SCSS

BEM (Block Element Modifier) is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more...

Sass: Lists and Maps + Iteration

This is a reference for myself. When I first had to figure out how to use key/value maps in SCSS I recall it was a pain with more research than I enjoyed. Lists were easier, but I figured I'd...

Use the Random() Function in SASS to Create Unique CSS Animations

Brief Intro

In August I created a Pen animation based on a Dribble illustration by artist Razvan Vezetue. I was able to bring his Floating Island Illustration to "life" not just through...

My css illustarion

Have you heard of the css daily challenge? I had signed up for it a while ago, but never actually took it. Instead, it inspired me to challenge myself to recreate an illustration using only css. It...

30 days js - update css variables with js

Update css variables with js

Challenge three from 30 days of js how to update scss variables with js. Being able to edit scss variables from js is very useful for changing styles in multiple...

Creating Pure CSS Images

I completed Codevember a while ago and created some CSS images during the month of November. Since then, I wanted to share my process on how I create art with CSS.

I was not familiar with...

Mixins for Animation: 3D Transforms

3D Transform

I just launched my first Skillshare class (woohoo!) and in the process of repeatedly extolling the virtues of writing reusable code, I realized I could be doing better.

Every time I...

A few mixins

Following are some of the SCSS mixins I used recently in one of the large site. The following mixin does not reveal in any way what site it is or have any reference. It just might help me or others...

SCSS - Basic Examples

Variables

  $primary-color: #111; body { background-color: $primary-color; } 

Nesting

  .fancy-wrapper { .fancy-box { width: 200px; height: 200px; display: inline-block; background: red;...

Mixin to convert Photoshop letter-spacing to CSS

There are situtations when you want to take the photoshop letter-spacing and convert it to equivalent CSS value and use inside your web projects. But you don't get units in Photoshop...

Let's Build: With JavaScript - HTML5 Video Player

https://i.imgur.com/3DWKT0U.jpg

Welcome to the next installment to my Let's Build: With JavaScript series. This tutorial teaches you how to create, customize, and manipulate an HTML5 video...

Tips for a Good Time When Extending CSS

Each of the points below have lived on a whiteboard in my house for months. I see them each day as I think about how CSS can be extended, and what the best way to design extensions to the web...

Dark mode, ENGAGE! User Preference Media Features in your responsive web app.

Dark mode, ENGAGE! User Preference Media Features in your responsive web app.

The dark theme option has been around in apps for awhile. But now, it's common to offer a dark theme at the OS...

freeCodeCamp Product Landing Page Project

In this post, I talked about going through the freeCodeCamp learning curriculum. I’ve done parts of it before, but I never got to finish it. Now that there’s a new curriculum, I resolved to go...

Quick Prototyping With Vue CLI 3

When you're like me (and a ton of other devs), you'll get an idea in your head that you want to start working on immediately. So you might clone a boilerplate you have stored in Github,...