cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Posts tagged css

CSS is sick

The world is full of errors, this is a general error of all the css properties, which allows you to validate as normal in all browsers!

A valid error or generated improvements is an evolutionary...

Cloud Floating Background

Cloud floating background with css transform

So, blog.

Let's try this new blog thing.


Looks pretty neat.

Thanks @CodePen for this cool feature!

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...

CSS tooltips

Inspired by Andy Park’s Pure CSS Tooltips pen, I took it one step further. Data attributes define the placement of the tooltip: left, right, top and bottom.

[[[pen slug-hash='JaftA'...

Show grayscale images with CSS

The CSS filters are not supported in a truly comprehensive way but still are really impressive and a modern appeal for the image anywhere. These filters allow you to modify the way the images in...

Positioning issue in iOS devices

Problem in Position:fixed

While developing an app, i found strange issue with the elements have property as "posiiton:fixed;".

In my app i used this property to fix the navigation bar at...

Top 10 Reasons To Learn Web Development

Today I want to get into some very good reasons why I chose to teach myself front end web development. If you're looking for a way out of that job you don't like, or are looking for the perfect...

Solving "text-rendering" problem on Android 4.2 and 4.3

Solving "text-rendering" problem on Android 4.2 and 4.3

Source: https://gist.github.com/pudgereyem/7da56c2f70fd57f89689

Comments: https://twitter.com/pudgereyem

text-rendering enables OT...

Something from Nothing: How to use Box-Shadow to simulate an 8-bit pixel-style figure

I've seen a lot of CodePen pens and other demoes achieving a pixelated look, using a single HTML element to create an entire--sometimes very detailed--figure, without the use of images, icons,...

Move IT: Using Basic CSS Animations

One of the most interesting CSS3 features to me is animation. Until recently, I had only looked in awe upon the fancy animations that other developers had created, wondering how it was done. Then I...





By St3fan

Let's Talk about Colour

CSS currently supports three different ways to define colours:

Using one of the preset keywords.

Using the HSL cylindrical-coordinate system

Using the RGB cubic-coordinate system

As an RGB triplet

As a...

Rana Waseem

I am Web Developer with 5 years experience.

HTML , CSS , Javascript, PHP , NodeJs are my strong tools

Build a box-shadow curve

Please forgive my poor english, code is my native toungueMy disclaimer is I wanted to do it in LESS I have no preference for Sass or LESS. They are both awesome. But LESS doesn't get enough CSS...

Adventures in BEM and Responsive with SASS


I've been trying to wrap my head around how to apply BEM and the pros and cons of using it (or something like it). For those of you that are unfamiliar, BEM (stands for Block Element...

How I Learned HTML/CSS And Bootstrap With Confidence

After deciding to teach myself how to code websites I bought a book on the subject, quickly read through it and dove into the codecademy tuturials. Soon after finishing that I bought another book,...

Modesto efecto de vidrio en CSS

La verdad es que en la creación de mi sitio web nuevo me encontré con varias cosas intersantes, que no había establecido nunca en procesos prácticos, como por ejemplo qué hacer si necesito que algo...

Create rotating SVG icons using CSS

I'm working on a project for a client that includes some pretty gnarly canvas animation. On one slide, the animation (a bunch of dots) converges to the center and a set of icons rotate around...

Flexbox and Intrinsic Sizing - some browser inconsistencies

With IE11 supporting the CSS Flexible Box Layout Module (Flexbox), I couldn't wait to use Flexbox in production. A homepage redesign for a long-time client was a great opportunity to get to...

React Mixin — Scroll Lock

Do What I Meant, Not What I Said

The sci-fi of my childhood promised computers that would do what I meant, not exactly what I said. You know that feeling — when you know what you want your computer...

IE7, Media Queries and Mobile First Design

Ok, so, disclaimer: I have no idea if this is best practice, and I'm sure someone smart will point out problems with it, but I just stumbled across this and thought it was a cool little hack.


Changing Behaviour With Media Queries...

... and a little JS

Recently I found myself with a conundrum. I'm in the process of a major overhaul of our company site, turning the old (IE6 compatable) markup into swanky new responsive...

stylus超基礎 - 書き方編





extend / mixin編



Conditionals / Iteration編







Transitioning to Transitions

CSS animations provide quick and easy means for adding a bit of pizzazz to your interface. They are great when you need to create complex animations over time using their keyframes property. For...

Diseño fluído (flexbox)

Por diseño flexible o fluído (flexbox) se entiende la característica que tiene el layout de una página web de adaptar su contenido de acuerdo al tamaño de la pantalla del dispositivo desde el que...

first test on codepen

test for a friend - blur background with menu

blur background with menu test

form example

form example width label placeholder-like

form example

flexbox test

flexbox layout test for a friend

Flexbox layout test

CSS3: Units of Measure 101

Here is a quick lesson on CSS3 units of measure. I know some have difficulty with this when starting out.

px -Pixel is exactly as described. It allows you to define size based on number of pixels....

An introduction

Hi and welcome! First an explanation of what this is. A blog yes, sort of, not really. It's a codepen blog. which means it is geared specifically towards code and code snippets often of the web...

Selector Weight

This is a quick exercise that demonstrates the different weight values of the three main CSS selector types, tag, class, and id, by targeting the same html tag with each of them.

Go to codepen.io...

Sibling Selector Madness (bugfixing)


Some of you may know what powers may be bestowed upon us with the incredible sibling selectors in CSS3:

  input[type=checkbox]:checked ~ label.class { /* pretty styles */ }...

A pure-CSS solution to equal height columns

Uses pseudo-elements to achieve the effect of equal column heights among floated elements.

Pure CSS Equal Column Heights

Credit: TutsPlus

Clearing Floats

This exercise that demonstrates the use of the clear property to prevent a containing HTML element from collapsing due to nested floated elements.

Go to codepen.io and log into your account.

Next, go...

Popup windows without JavaScript

The other day I had this crazy idea. Popup/modal windows used in modern web design require JavaScript to be enabled in order to function. I wondered if you could get it working without JavaScript....

Popup windows without JavaScript, mark II

Some time ago, I wrote about how to make a popup window without JavaScript. Someone left this comment:

Keep in mind that this seriously **** up your history (and therefore your back button) – a much...

CSS Transition Height Fixed-Auto The Easy Way

The Problem

CSS transitioning height (or width) between a fixed value and the block's auto size currently doesn't work in most (all?) browsers. However CSS Transitions are faster, easier,...

Box Model Basics

This exercise demonstrates basic box model properties as well as how the CSS3 box-sizing property impacts box model height and width.

Go to codepen.io and log into your account.

Next, go to the...

[RETINA DISPLAYS] Different solutions can be applied for images

1. Font Icons

This is the best solution but at the same time the most difficult to implement because our icons are custom.

Why use font icons?

Scale easily

Change color easily

Include shadows easily


Contextual heading sizes with Sass

Sass maps make it possible to create congruous, contextual CSS. As an example, let's look at heading sizes.

I try to keep the font-size differences in my headings uniform, i.e.:

  h1 { font-size:...

CSS Box Shadow Generator

Effect 1

Effect 2

Effect 3

Effect 4

Effect 5

Effect 6

Effect 7

Effect 8

[CSS] Positioning


Reverse Responsive Animation in Pure CSS

Number Scramble / Backwards Responsive Text Animations

I happened to have been finishing up some projects and naturally couldnt resist playing a bit I wanted to have a flat css based logo for a site...




Hello World

This is my first post on new blog http://www.ecloudtimes.com/category/bollywood . Here I will be sharing Bollywood Entertainment News like Trailer, Review, Songs, Promo etc. Stay tuned.

CSS Heart♥

CSS Heart♥


で、userstyles.orgにてPretty Firefox ( about:home )と言うのを作りました(現在は公開していません)。


WTF is a BootSplat vs a Bootstrap?


A Visual Reference

So WTF is a BootSplat?

We all know there's a difference between a "Splash Page" and well, a "Splat" page it comes down to laziness often, but as...

Pure CSS Transparent Image Under Text with Scaled Background Image

Pure CSS Transparent Image Under Text with Scaled Background Image

2015 updated examples!

A quick example of making use of the background clip property for webkit browsers staying as functional as...

Make Fullscreen html elements in Different Screens

How To Make a HTML element the full height of any screen ( Even without content ) with only CSS!

there are good methods for doing this and There are two ways in this post .

First Method :

use height...

A New Beginning

I have never wrote a blog post before so this will be the first! I recently read a post by Rachel Smith called “Last Year I Joined CodePen. What Happened Next Will Blow You Away.” (great name by...

Code input breakdown

I went to Starbucks the other day. On the receipt was a code to enter on their website, so I went there on my computer. As a front-end developer, I was impressed with the behavior of the form.


First coding project!

This is the very first thing I ever coded. It's still my favorite!



1. 在等权重的css选择器上,样式是css文件里定义的顺序还是在html元素上使用的顺序生效?



2. 全局变量


  function foo(){ var a = b = 0;}foo();...

Magical Config Objects with Sass Maps

I’ve been spending a lot of time recently trying to harness the full power of Sass. I love the idea of CSS preprocessing, because it allows me to treat my frontend code like backend code, in a way....

100 Codepens

The top 100 Codepens of 2014 is pretty inspiring right?. I'm going to try to build something inspired by all of them in an attempt to be less dumb. Here we go!

1. SVG Loading Icons


Centering of elements in HTML

The last days I was busy with writing an article on the vertical centering of HTML elements. This issue which seems simple at first, in fact is very complicated in cases a lot of problems for the...

A scalable phone

In this a tutorial to show how to emulate a phone sliding in a pure CSS way. You may often see such phone sliders, but most of them use fixed pixel sizes. Here our goal is to produce an animated...

Dr.Pot V1.0 beta

Hey guys we hope you like Dr.Pot we have some problems but it is still beta and we will come out with some more updates my partner is Austin Lancaster we are working together to make a game that...

A glass of water

Transparency in CSS is dealted with the opacity property and eye-focus experience with the blur filter. Let's explore that with a typical focus variation use case: droplets on a glass. As you...

Fun with fullscreen

I had to do a little research into the HTML5 Fullscreen API for work this past week. I ended up creating a couple utility classes that I thought could be shared.

I needed to manage the visibility of...

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 an...

Smarter Than Flexbox

Currently enjoying a love affair with @ryanessmaker's navigation for the new TGD redesign.


I thought it used flexbox, but instead...

처음배우는 HTML, CSS - PART.3

처음배우는 HTML, CSS마지막 수업에 사용된 첫번째 샘플

Sample Page 01

Understanding CSS clip

Understanding CSS clip

CSS clip property is a little tricky to understand with its cordinate system. Personally, it was definitely not simple. So let's...


hello everyone. my name is ishh, and i want to show you my skills and how i got introduced to css and html and javascript coding. how i was introduced to it is by my best friend. we're talking...

Scaling inline SVG: CSS & other sadnesses

UPDATE: Turns out SVG has an attribute for exactly this use-case. It’s called preserveAspectRatio, and all I needed was <svg preserveAspectRatio="xMidYMid">. In fact, that’s the default if...

善用CSS偽類別與Radio button,不用JS也能做出頁籤功能


Scifi-style Radio-based Tab

講到頁籤(Tabs)功能時,大多會想到用JavaScript去做,像知名的前端框架:Bootstrap所提供的Tab元件,就是用jQuery實作的(其實網路上有很多用jQuery開發的Tab UI);但其實不用jQuery或JavaScript技術,...

Transitions on Elements of Unknown Sizes

For some time I have been looking for a way to animate the way that dynamically filled elements expand and contract in my layouts, but without giving them explicit heights or widths. I like the...

Optimizing SVGs in data URIs

Awhile back, CSS-Tricks posted “Probably Don't Base64 SVG”, which concluded that SVGs in data: URIs are smaller used as-is instead of base64-encoded.

It’s got the right idea, but there are a few...

Escaping CSS Class Characters

Did you know that you can escape class characters in your CSS? It's not something you would normally do but could create some interesting opportunities. I conducted a test to see how practical...

Journey to the Front

Honestly, CSS scares me.

When things scare us, it's usually because we don't understand them. Obviously that means I need to work on understanding CSS better!

So, I'm going to commit to...

CSS Hacking For Internet Explorer

IE only css

(1). Adding stylesheet just for IE:

   <!--[if IE ]> <link rel="stylesheet" type="text/css" href="ie_fixes.css" /> <![endif]--> 

(2). Adding body class just for IE:


Finding all Perfect Responsive Multi-level Dropdown CSS Menus

Finding all Perfect Responsive Multi-level Dropdown CSS Menus

[Full list by Myke Black (@mykeblack), Update 26th Feb 2015]

The WINNER is Smart Menus - Describes itself as 'possibly the most advanced...

CSS Puzzle - Episode 1


I've been working for Vodori for almost two years now, and I've come across some crazy CSS puzzles. This one is no exception.


Our experience design team (known internally as...

Vodori Retrospective

My departure

I've had a great run here at Vodori. I've been here for a year and change. My role evolved from "markup producer" to nearly full-fledged "front-end...

jQuery plugin: .deepest()

I was inspired to write this plugin by a Stack Overflow question and answer.

Someone else created a jQuery plugin from the answer as well, but it doesn't have all of the hallmarks of a robust...

My New Collection!

I have written another collection with these programs! go check it out! The collection is called CSS

Android Camera Icons pure CSS

[[[pen slug-hash='WvrrgG'...

Design Patterns and Objects with LESS

There's no shortage of posts about preprocessors, and more specifically about LESS. Now that I've been working with preprocessors for a few years now, I feel good about sharing the features...

CSS tabs and accordions done well

This appears to be one of those favorite subjects of the web dev internet that just doesn't want to die despite years coming and going. CSS-Tricks highlighted the subject briefly just...

First blog: Building menus


As my first post on codepen, I want to write a little about the constrution of a menu. Especially a menu on one page.

[[[pen slug-hash='eNZmPR' height='500'...

Instant, responsive print stylesheets

Instead of writing your media queries like this:

  @media only screen and (min-width: 40em) {}

simply remove the only screen and:

  @media (min-width: 40em) {}

or change it to only all if you still want to...

Hey You! Have you heard of, "Gradient Animator"

A CSS generator to create beautiful animated gradients for use on your website.

A Clean Way to use css backgrounds in web pages.. Major Factor it's animated..

Check Out Gradient Animator!

The Most Impressive Selector I've Ever Seen

Looking at the code in my Twitter home page, I found:

  a,.btn-link,.btn-link:focus,.icon-btn,.pretty-link b,.pretty-link:hover s,.pretty-link:hover b,.pretty-link:focus s,.pretty-link:focus b,/*...

CSS Margin Collapsing Explained

How the browser handles adjacent HTML elements and nested HTML elements with regards to creating a single vertical margin, an aspect of CSS known as 'margin collapsing', is not a difficult topic to...

CSS tricks

(1) Hide an element, and keep its :after or :before element

   #myspan { font-size:0px; } #myspan:after { font-size:16px; content:"*" } 

(2). CSS multiple background:

  html, body { background-image:...

Jquery Examples

Jquery Example

In this post there are really cool JQuery examples that you'll certainly find interesting and useful.

Below is the list of very cool JQuery example:

Magic Header

JavaScript Tutorials

JavaScript Tutorial

In this post, I'll put Mr. Adam Khoury's JavaScript tutorial videos. From start to end.

Below is the list of very cool JQuery example:

01 - Fullscreen API JavaScript Code Examples...

how to make a HTML Web Browser not working

first copy and past this code into a html editor and save it as .html

click here for html code

copy and past this code into a css editor and save it as .css

click here for css code

and the finale page...

CSS Transitions and JavaScript Tweens

Web animation is totally on fleek this year. I love that its popularity is gaining such momentum because it is my favourite part of building for the web. You might have decided you wanted to get on...

Pure CSS transparent rendering of animated gif 'fantastic fish' gif+css

   <dd><dt>note: cant believe i posted this public..</dt></dd> As if the title doesnt explain it seriously?

I kid, but this is serious. OK, so I found a (code)pen it was...

Icon Animation, from Menu to Close with only CSS and transitions

Guardando Design + Code — Hour 5.2: Responsive Header su DevTips, ho trovato molto interessante l'effetto di transizione dell'icona menù, che diventa l'icona di chiusura del menù quando...

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 the...

Think big with vh and vw

These underutilized properties allow you to scale elements in proportion to the viewport.

What do vh and vw measure?

vh - measures the viewport height

vw - measures the viewport width





设置块级元素的width可以阻止其从左到右撑满容器,设置margin: auto;可使其水平居中


为元素设置box-sizing: border-box时,元素的内边距和边框不会再增加它的宽度...

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...

Responsive Squircle

After spending a few hours looking for a responsive squircle code I decided to give it a try. Here's what came out of it.

It will looks good from 30px to 200px.

[[[pen slug-hash='XmreZx'...

Web Design as an Intro. to Programming

Last year I was re-introduced to web design and development while a few friends and I decided to run our own Minecraft server out of boredom. At the start I had no idea what I was doing as the...

A check!

A simple single element animated check mark. Enjoy, and feel free to leave a comment or suggestions etc.

A Tick

Avoid Redundant Clearing Mechanisms on inputs in IE10+ and Microsoft Edge

It's common for web developers to provide their users with the capability to clear text entered into an input with one click and have that same consistent interaction across browsers. This can...

Using a Custom Keyboard for CSS

a.k.a Doing the 68-key Shuffle

One day I ran across this incredible video by musician Jon1st, a world-class DJ. I was in awe that, although everything he did on his equipment was possible to do with...

Z-Index and Stacking Contexts - Let's Get Things In Order

A useful property of CSS is the z-index attribute. This allows you to control how elements are layered visually on top of one another within a webpage. This allows you to ensure that all of your...

Ellipsis Loader

A simple loader with 2 elements.If you like or used this, or have any suggestions or criticism, please leave a comment

Ellipsis Loader

I am shy

The old school


Flexbox Guide

Flexbox Guide

This is my first post on Codepen which looks into Flexbox module, covering most if not all the different CSS properties. This guide is what I have learnt about Flexbox and I hope you...

Carrom Board

<!DOCTYPE html>

Carrom Board

Carrom Board

<!DOCTYPE html>

Carrom Board

包含ブロックに overflow を指定した場合、position: sticky; が動作しなくなる

position: sticky が動作しなくなるケースがあったので調べてみた。
※要Safari / Firefox


親要素に overflow を指定した場合、position: sticky; が動作しなくなる


包含ブロックに対し、overflow を指定すると動作しなくなる。


Pure HTML/CSS Slide show


  <ul id=banner> <li class=slide-1></li> <li class=slide-2></li> <li...

r8a's e-portfolio Duke U HTML/CSS/JS 101

1st Exercise - CG generated image using JS

Duke e-portfolio exercise 1

2nd Exercise - CG modification to existing image using JS[[[pen slug-hash='bVxPWG'...

Como deixar altura 100% com CSS

Como vocês já devem ter percebido posicionar um elemento com width: 100% é fácil e simples, tudo as mil maravilhas, mas quando se quer uma altura 100% ou seja o height, começa a dor de cabeça para...

Boas práticas e dicas de CSS

Olá senhores e senhoritas, irei apresentar algumas dicas básicas sobre boas práticas de CSS.



Apenas com esta propiedade suas imagens nunca mais iram ultrapassar o...

Tutorial: Create ruler using Flexbox layout


Flexbox coming with CCS3 is an useful, handy way to do layouts in CSS. Learning using flexbox is pretty simple and you can find out a bunch of resource to learn this. In this post, I...

The Mad CSScientist's Buttons

I have polished up some CSS buttons I've been using lately, and have two new ways to quickly use them:

With CSS

Just drop a link tag to data-buttons.css into the head of your HTML and it will...

some help

Hello, yes you how are you?

im a begginer with canvas, i need some help with thishttp://codepen.io/jolx/pen/vNvXYQ

i would like to see animate that heart.

[[[pen slug-hash='vNvXYQ'...

Don't misuse the calc() CSS function!

Lately I've been using calc() more and more, but here's the thing: using calc() excessively is wrong, and using calc() for things that it is not supposed to is also wrong. Wrong as in using...

Google homepage bottoms out at 980px.. whaaattt? A flexbox layout experiment

Recently I've been working on a very bare bones "flexy" css reset to prototype with. After many iterations over the past month it was ready to be put to test. Last night (whilst tuned...

Challenging the Web Gods and the Status-Quo

Welcome to our website! We hope you enjoy the slick image covering the entire screen. See the brightly colored call-to-action button? Yeah, that’s right, the Sunbaked Terracotta one. Go ahead and...

Зважені та щасливі

Знаменита вага з передачі "Зважені та щасливі"

Зважені та щасливі

CSS Background-Image Hover Effects

Getting the CSS Hover to Work was Fun!


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

Responsible square

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dictum mi tortor, nec congue erat tempor sed. Fusce ante ipsum, sagittis et pellentesque eu, sagittis nec ipsum. Pellentesque massa...

Few CSS Best Practices

Listed out are few best practices that can be followed to write an awesome Stylesheet.

Guideline 1
All CSS properties which are vendor prefixed should be accompained by default property at the end....

Typografi: Pixel-Perfect Photoshop til CSS

Hvordan afkoder man de typografiske begreber i Photoshop, så de kan bruges i et stylesheet til hjemmesider?

Typografi er et utroligt vigtigt designelement, som de fleste integratorer overser, når de...

6 Atom Packages every front end dev should have

Atom from Github is rapidly becoming the text editor of choice with front end developers nowadays possibly because it's been developed with technologies we are familiar with such as HTML, CSS...

CSS Only Hamburger Animation

The example

See the Pen 100% CSS Hamburger Animation by Grant Vinson (@vinsongrant) on CodePen.

What? An animated hamburger icon with no JavaScript?! Thats right, and it is pretty straightforward.


Was ist CODEPEN ?

CODEPEN ist ein nützliches Werkzeug. Besonders für alle, die gerne etwas mit CSS spielen, oder sich die Werke von anderen ansehen möchten.

Hier lassen sich tolle Animationen und spielereien von...

UC Santa Cruz Billboard Animation...

UCSC Billboard Animation

CSS Animation. The music was just for fun. :)

CSS's undersung property: box-sizing

Here is a little CSS snippet we can apply to *all elements which will make our lives infinitely easier:

  html { box-sizing: border-box; }*, *:before, *:after { box-sizing: inherit; }

CSS box-sizing...

CSS Animation Steps() Basics

Sprite Sheet

In my latest blog post we'll discover how to create a sprite sheet based animation for a Tiny Tower inspired character using CSS Animation and the steps() timing function. Check out...



#4. Flexbox playground on CodePen, Bulma (CSS Framework based on Flexbox) and PageSpeed Insights from Google

Hej Bloggis !! (Katarina's suggestions on how to start blog posts).First of all sorry for the delay on updating the blog, but too many things on my plate atm so I've been postponing this...

CSS basics (part I)

A quick 5-minute CSS Series (introduction)

Cascading Style Sheets (CSS) is a language for specifying how documents are presented to users.

how CSS works?

The browser converts the markup language and...

#5 CSS Specificity Wars, Collab Session, Stacking Elements and OUI

CSS Specificity Wars

Kat showed us a site that easily describes CSS specificity. This Star Wars fan has made it easy to understand the specificity of CSS selectors. In this way you can see how...


hello there! im lykakspars!

get some animation html? no... there is CSS animation!


And now There is Example script:

@keyframes NAMECLASSORNAMEHERE {0% { transform: rotate(0deg); }}

or webkit...

BEM classes, could we use custom elements/x-tags instead?

A system called BEM has been invented to avoid the CSS selector mess which seems to be the rule more than the exception in many modern websites. The way that the system works is to view HTML...

An Overview of HTML5 Semantics

This was originally published Jan 5, 2016.

An Overview of HTML5 Semantics

What are HTML5 semantics and why should we use them? What is divitis and why shouldn’t we use it? This post is meant to...

Daily Animation

1 animation daily.

My workflow:

Mock up in Photoshop/Sketch

Animate in After Effects

Prototype on CodePen.


In einigen Projekten möchte ich, dass sich die Schriftgröße sowie die Schriftfarbe ab einem bestimmten Viewport ändert.

In folgendem Beispiel ist die Schriftfarbe bis 800px schwarz (#000000) und die...

Using imported CSS as Sass

In this article, the author hooks a post-install script to run after Bower installs or upgrades. One use case where this is handy is when you have a CSS file that you want to include in your own...

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...

Hora de aventura com CSS #1 - Formas básicas

Introdução a série

Jake (Adventure Time) in pure CSS

Depois de muito tempo sem fazer nada legal, resolvi pegar uma noite e fazer algo para me...

Hora de aventura com CSS #2 - Posicionamento

Preparando nossa "Folha em branco"

Agora que sabemos como criar formas básicas, podemos dar o próximo passo e preparar nossa folha de papel em branco para posicionarmos nossas formas e...

Hora de aventura com CSS #3 - Transformações

CSS3 Transforms

Agora sim! Vamos conhecer umas das melhores features do CSS3, o que vai literalmente transformar sua percepção da linguagem :D

A syntax é bem simples: transform:...

Hora de aventura com CSS #4 - Desenhando com amor


Vamos relembrar um pouco o que já vimos:

Formas básicas



Massa! Agora que tal juntarmos tudo para desenhar algo que represente o motivo desta série de posts...

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...

Hora de aventura com CSS #5 - Animações (parte 1)

Dando vida as nossas criações

pulse heart

Chegou a hora de falar sobre umas das coisas mais divertidas da vida! Vamos aprender...

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...

css text gradient

Cool blue sky on a sandy beach


Hora de aventura com CSS #6 - Sombras

Entendendo como as sombras funcionam

Sombras com CSS são bem fáceis de criar e entender, tão fáceis, que a partir de hoje você meu caro leitor, nunca mais vai precisar de nenhum box-shadow generator...

Hora de aventura com CSS #7 - Pseudo-elementos


Abordaremos basicamente os pseudo-elementos ::after e ::before, hoje aprenderemos que esses caras são muito importantes para a qualidade de nossos desenhos.

Vamos lá ;)

::after e...

Hora de aventura com CSS #8 - Animações (parte 2)

Mais dinamismo

Na parte 1 aprendemos a configurar nossas animações, hoje iremos focar nas animações de fato, em cada movimento e conbinações de movimentos. Vamos nessa <3

Trabalhando com keyframes...

Hora de aventura com CSS #9 - Flexbox básico


Flexbox é um modulo da CSS3 que define um novo box model otimizado para interfaces, ou seja, agora temos uma especificação focada em interfaces, nada de floats ou tabelas aqui.


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 maintain...

Filtered background with fallback for legibility


Can you use @supports instead of this trick?

You know what’s hot right now? Big, high-quality, Retina-crisp JPEGs, blurred into a header background:

[[[pen slug-hash='RaprZK'...

Advanced Card/List Toggle with Definition Lists

Cards and Lists

Displaying a lot of information on one page has its own unique challenges, and when you consider users' perspectives, well- it gets even more complicated. Some prefer neatly...

Better Responsive Breakpoints Naming


With the rise of responsive web design and CSS preprocessors, the breakpoints were generally named phone tablet desktop to easily differenciate the devices on which the design responded...

Flex Gon' Give It To Ya: Part 1

Flexbox Layout is the best thing to happen to css since box-sizing: border-box. It is useful in like a million ways, and it can be used to solve a lot of difficult problems with ease. It is a bit...

Quelques exemples avec Display contents

Editor Draft

CSS Display Module Level 3Editor’s Draft, 31 January 2016

Ces éléments ne produisent pas de boîtes en tant que tels, ils sont remplacés par leurs pseudo-boîtes et les boîtes filles.MDN -...

Counter issue for Poison

I am having an issue getting the Poison counter to say "Dead" when it reaches '10'. I have gotten it to stop at '10' but does not change to "Dead". I want it to...

Making Massive improvements to performance on all Modern Web platforms/browsers

When using CSS, there are many ways to increase performance, from using only repaintless animations to minimising the effect of a repainting animation such as colour changing. Of course there are...

Simple SVG Animation

The simplest way to animate SVG with just CSS!

SVG File

First off, prepare the SVG file you would like to use. In this case I'm going to use SAYS logo. You can get the SVG code from opening the...

Fixing the white glow in the CSS blur() filter

Have you used filter: blur(), and were disappointed with the soft halo around the filtered element? Would you like to fix that?

[[[pen slug-hash='yOxMab' height='500'...

How to choose the right framework for the job

Welp, no one has ever talked about this, right? Just kidding...

A quick Google search on 'choosing web framework'

That being said, I want to talk about the "how to choose" rather...

BEMantic: DRY Like You Mean It

Tim Baxter’s recent A List Apart article, Meaningful CSS: Style Like You Mean It, has once again re-ignited the debate that front-end developers who prefer to take an object oriented approach to...

beautiful hexagone

only one little and beautiful hexagone.

the beautiful hexagon

Dribbble 30 days UI Challenge

by Kalpesh in UI at 23/05/2016

Hello developers,

Few months ago, I have decided to wake up at 6:00 in the morning. The main goal was to learn and code. I have followed this routine quite regularly....

Maintainable CSS based on SCSS


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...

Semantically Integrated CSS

A recent A List Apart article Meaningful CSS: Style Like You Mean It, by Tim Baxter (May 3rd, 2016) has caused a lot of furious posts in the frontend community. Personally, I think the subtext of...

Breaking Out With Viewport Units and Calc

While iterating on a new article layout for the impending Cloud Four redesign, I encountered an old CSS layout problem.

For long-form content, it's usually a good idea to limit line lengths for...

CSS Pseudo Class :before usage

  a:before { color: #fff; background: #000; font-size: 120%; padding: 2px 5px; display: inline-block; width: 1.2em; margin-right: 10px; text-align: center;}a[href^="mailto:"]:before {...

CSS Pseudo Class :after with attr() - hover box

  //to keep the hoverbox relative to parenta[href^=http]:hover { position: relative;}a[href^=http]:hover:after { content: attr(href); position: absolute; top: 1em; left: 0; background-color: black;...

quote with trangle

  .quote { border-radius: 10px; position: relative; padding: 20px; background-color: red; color: white;}.quote:after { position: absolute; content: ''; width: 0; height: 0; border: 20px solid...

CSS-Chat Bubbles

  .thought, .though:before,.thought:after { border-radius: 50%; border: 5px solid blue; background-color: white; position: relative;}.thought:before,.thought:after { content: ''; position:...

clearFloat using pseudo element

  .group:before,.group:after { content: ''; display: table;}.group:after { clear:both;}.group { zoom:1 /* for IE6/7 trigger haslayout*/}

CSS - Print Style

   @media print { /* styles go here */ }

CSS - Media Queries

how to use it1. In html, use different stylesheet for different screen size.<link rel="stylesheet"media='screen and (min-width: 320px) and (max-width: 480px)'...

CSS: Color Formats

  color: white;color: #fff;color: #FFFFFF;color: rgb(255,255,255);color: rgb(100%, 100%, 100%);color: rgba(255,255,255,1);color: rgba(100%, 100%, 100%,1);color: hsl(0, 100%, 100%);color: hsla(0,...

Setting a background image for the page

In this tutorial I'm gonna show you how to add fast and easy a background image for the whole web page. Here's an example of how it'll look alike:

[[[pen slug-hash='qNBjKq'...

Animatable (whoa)


Whoa, man. CSS has changed so much since highschool. You can animate stuff now?!

I found out that you can animate using flex-grow and saw a cool example on w3schools so I thought I'd...

CSS- Text Shadow

  text-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.2);text-shadow: [horiz] [vert] [blur] [color].textshadow { text-shadow: 0 1px #cccccc, 0 2px #c9c9c9, 0 3px #bbbbbb, 0 4px #b9b9b9, 0 5px #aaaaaa, 0 6px 1px...

CSS- Gradient

  :root { background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.5, rgba(255,255,255, 0.25)), color-stop(0.5, rgba(255,255,255,0.5)), color-stop(1, rgba(255,255,255,0));...


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...

Best Android HTML Editor

   [HTML Code Play](https://play.google.com/store/apps/details?id=com.HTML.AngularJS.Codeplay) is one of the newest android application, it is used to learn programming with very simple examples. It...

Materialize CSS - Introducción (Parte 1)


Materialize forma parte de Material Design, lenguaje creado y diseñado por Google. Cuyo objetivo principal es unificar la experiencia de usuario en todas las plataformas, y facilitar la...

Truncate a String in CSS

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

Finding Inspiration in Video Game UI's

When I first started trying to populate my CodePen profile, I was having a little trouble coming up with ideas. I had a few while browsing Picked Pens, but my page still looked saddeningly sparse....

the hidden tiger magical lion club

My own design of this project and hope you'll like it :)


Creating Cool CSS Animations to Improve Frontend Performance

There are quite a lot of frontend developers in our audience at Snipcart, and many of them dig performance-enhancing activities. So to live up to our promise of offering a fast & custom...

More CSS-Based Icon Fonts... Awesome!

Sometimes text just isn't enough. Icons can communicate a lot of information to a user and how they can interact with the content on your site. The challenge often lies in creating, curating...

Centralizar elemento verticalmente usando CSS

Centralizar elemento verticalmente usando CSS

Centralizar elementos com css nunca foi tão fácil

Para centralizar elementos na vertical ficou bem simple com css utilizando a propriedade display você...

CSS3 Rainbowized Animations

Browser Power

I was playing around with CSS3 animations and what can be done with them, and I wanted to try to animate text that rotates its color through the color wheel. So, I made up the...

Son do you know Emmet ?

Quick explanation :

let's say you need to write down the following HTML code:

  <div class="row"> <div class="col-md-6"></div> <div...

Creating Angles With Clip-Path and Transforms

For the last year and a half, I've done most of the front end development for DukeHealth.org. Much of the recent design has included angles in between sections to create a visual progression...

Intrinsic ratio elements with a max height

Here's something that took me longer than I care to admit to figure out how to do. I have a photoblog where I post the photos I take; I like to display them at high resolution, but when...

I think I found my frontend Niche' or what they call it :D

So basically, I am pretty bad at writing so I apologize in advance.

I am not "professionally" a frontend designer but I hope to be someday. In this journey to a frontend developer job, I...

Death to the 'for' attribute

We've got a problem.

HTML forms are the life blood of data on the web. They've allowed us to post custom data around our fantastic online world since day one of the mainstream world wide web...


Done for good spirit

Making an Ocean with Angular 2.0


I used to dislike Angular a bit. Angular was one of those frameworks that were easy to recognize. I never felt like I was writing "real" JavaScript when I wrote Angular. Your...



Since we have gotten rid of IE9 (HOORAY!!!) we can start to use some new CSS functionality. The first one I want to show you is flexbox. Using flexbox we can create really responsive layouts...

Isometric Pure-CSS Server

Isometric Server

Credit for server design goes to Csaba Gyulai, check out the original artwork, Thought it would be fun to re-make...

Gradient The Magnificent

I Still Love You, I Just Need A Break.

I've been enamored by color gradients lately. This is definitely a cyclical phenomenon. I'm coming down off my Aspergian fixation on solid colors, and...

Getting started with Sass



Sass is a great little helper for dealing with complex CSS and extending functionality, come along and learn SASS. A cool Css preprocessor that is supposed to give your Css Superpowers...

Chapter One: Overflow

Overflow determines what happens to the content when it breaks outside of the bounds of the container. When you have too much content filling the space, or when you have crowded the page with...

Pure CSS Tooltips

A lot of web sites use JavaScript to create tooltip but is actually easier with CSS.


Inside span elements:

It's a quick and simple process: use data-tooltip, for example in span...

BEM vs Mixins

A couple a days ago someone in my team raised the following questions: "To add a new version of a button, should we use BEM modifiers or create a mixin to add the basic styles of the button to...

A Very Simple CSS Grid

I learned Bootstrap earlier this year for a few projects. Mostly because I wanted to use its grid system and template navbar for a few things. And while it did allow me to quickly cut & paste...

I'm learning how to code, again.

Hello World!

So I'm learning how to code, again. Why again?

Well, I started at univesity, while I was studying Physics in Italy. I remember a big desktop computer, Red Hat as operating system. I...

My First Mixin

First things first, this mixin was written in the SCSS format. Sass format is a little different. You can check out the same mixin in Sass here.

So in a nutshell, mixins can be helpful when you have...

Interactive retro radio player

Interactive 70's radio player / Pure CSS/Jquery

Check out the full working version here
Interactive Sangean WR-11 radio player, made purely with CSS &...

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 aboutSCSS? Well it was only a matter of time. If you’re comfortable...

Dialogue Box


h1 box + persuade element triangle
How to make a triangle Ckick Here


  <h1>some text</h1>
  h1 { background-color: rgba(193, 215, 174, 0.3); color: #90a955; padding: 10px;...


CSS linear-Gradient


  <div>some text</div>
  div { /* defualt angle: top  bottom / / 050%: pure color(transparent),50%100%: pure color(mint) / / if second % > first %, display two...

CSS Cassette

Css Cassette

Designed a CSS Cassette using only HTML & CSS with recording kind of CSS animation. This is an inspiration...

Create a resizable iframe easily using only css

How to create a resizable <iframe>?

Since directly adding resize:both to the <iframe> doesn't work, we have to use a "hack".

Since width:100% and height:100% will take up...

Notebook Lines

How to make it


in the linear-gradient, if the second color % LESS THAN the first color%become color block



Make Triangle


the css border's future is "45 between border and border"

take off border-top,and set twice bigger width on the border-bottom
set the div's height and width = 0
last,set the...

Escaping CSS rules

This is a very quick post on how to start your CSS class name with a double hyphen Ex: <div class="message --is-danger> Watch out </div>.

I try me best to keep the post simple and...

Grids should not bleed

Hello, this post will try to explain why bleed on CSS grids is bad.

For anybody who's not familiar with the concept of bleed, it's the space (typically padding) applied on a container so...

nav bar with logo

First post!

Hello World!

Here is my first codePen post and a Kurt Cobain tribute page, please enjoy the code.

PCRS - Pure CSS Responsive Slider


I have seen this request again and again over time where people were trying hard to come up with a simple yet elegant slider that utilizes CSS3 and does not require any javascript or jquery...

When you try to set height with Bootstrap.

Hello everyone. This is my first post and here i will talk a little bit about CSS height Property. Today I met something new and interesting for me. When i tried to set property height to DIV...

@supports for selectors

The @supports rule lets you apply styles only if the browser understands a specific property, or property: value pair. It's finally accumulated a critical mass of browser support, and degrades...

Formatting Complex CSS

Format css with your spidey senses.

Deep down we all have our super tingly spidey senses for figuring things out in the best way possible. Now when I first saw idiomatic css by Nicolas Gallagher,...

Rating stars with just CSS

I took inspiration from this post

I used flexbox instead of the unicode and bidi-override properties.

Rating stars with just CSS

Sloppy & Paste

A friend of mine was getting started in web development by building a page on Codepen. I sent him a quick tip through Google Hangouts, namely to set his images max-width to 100% for an easy step...

How To Use CSS Variables

Hey! Today we are going to go over CSS variables. This post will be broken down into two sections. One for how to create CSS variables and one for how to use CSS variables.

I also have a...

Checkbox non-hack (doesn't break behavior)

Checkbox non-hack

Most methods for styling the checkbox element rely on some variation of Ryan Seddon’s “checkbox hack.”...

Como alinhar elementos verticalmente sem gambiarras e compatível com os navegadores?

Olá jovens programadores, alinhar elementos na pagina pode ser um pouco complicado para quem não tem muita experiência com css, quando eu comecei meu grande problema era alinhar elementos...

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...

Understanding EQCSS Triggers

The EQCSS plugin is designed to re-evaluate the responsive conditions and recalculate the CSS contained within EQCSS styles as often as the page needs it. In order to do this automatically EQCSS...

Cool FeedBurner Subscribe Form

Subscribe me

Subscribe Now

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...

Basic CSS for HTML Beginners

We can use some Basic (Global) CSS for our website, which help us to handle many element automatically. For eg:- If you are using Bootstrap for your project then for all the Images you have to use...

Daily CSS Images

I'm not entirely sure about the utility of codepen posts, but I'll give it a stab and see what comes from it.

I started Daily CSS Images challenge yesterday, and I enjoyed my first attempt....

Elephant - Daily CSS Images 02

Challenging to make an elegant elephant! I knew it had to be stylised in order to keep it simple, but I wanted it to be less grotesquely cartoonish than yesterday's effort.

After a quick image...

Beaver - #dailycssimages 03

I nearly lost the faith halfway through this one, but it came good in the end:

BEAVER #dailyCSSimages 03

As I mentioned yesterday, I'm...

TIGER #dailycssimages 04

TIGER #dailyCSSimages 04

Pfff. Bit of a struggle, this!

I quickly decided that the full body shot would not be happening - head and...

Crab - Animal Alphabet

I was going to re-do my Cub from day one of the cssdailimages challenge, and then I realised it doesn't really fit my "A is for Animal" theme.

So I started a new animal for C: a crab....

Smooth Fluid Responsiveness

Have you ever wondered, how far you can go in responsive design?

Lots of people will tell me that it depends on what you can imagine and how far you can go in programming it. Websites are my Little...

Flexbox vs Bootstrap

At two years in I'm still a baby when it comes to front-end development. Don't get me wrong, I have learned a lot, but I can see that this industry will always offer new things to learn....

Grow Image On Hover Code

<!doctype html>

Zero Vectors | Grow Image On Hover

.growwrap img { transition: all 2s ease-in-out; transform-origin: center; -webkit-transform-origin: center; padding-top:50px;}...

How to Create Direction-Aware CSS-Only Hover Effects


A couple of tutorials for direction-aware CSS-only hover effects.


These tutorials are intended for people who have at least a basic knowledge of HTML and are proficient to advanced...

Social Media Sidebars

Disclaimer: The hover mechanic MIGHT not work on certain browsers because of the 'opacity' CSS tag. I have only tested this on Firefox. Sorry for the inconvenience.

Click Here for the fill...

Tutorial: Edit in Place

Table of Contents






Make an editable label. When the label is clicked, a textbox shows up allowing the user to edit the label. To edit, the user has to press the...

Passion is Initiative

Delving into the Computer Science major has made it easy to become sidetracked from what originally brought me into the field -- my love for technologic visuals. With mandatory courses...

Let's check out Material Design Lite

Material Design Lite


I love CSS frameworks, there is a certain magic in adding a css library and a few lines of HTML and getting a polished responsive web page, so come along and check out ...

CSS Variables Are A Sometimes Food

I’m seeing developers switch from a pre-processor like Sass to PostCSS, because the modern specs now provide everything we need, such as CSS variables (or custom properties if you’re that way...

Hack browsers CSS

Use the power of CSS to manipulate styles in specific browsers

By Fred Rocha (2017/02/28)

Compatible Browsers

Occasionally the layout of a WEB page needs to receive specific changes according to the...

Smart Grid Responsive

Make responsive applications simply

By Fred Rocha (2017/03/01)

Responsive Design Population

66% of the world's population makes use of some mobile device. Responsive design is essential to ensure...

Coder? Developer? We're all the same!!

I love coding. Its fun and creative and you can do as much or as little with the tools it gives you. But theres something about it that I don’t like. Egos. The overbearing egotistical twats who...

CSS Features detection de forma nativa com @supports

Por que feature detection é importante?

CSS Supports

Quando falamos em desenvolvimento Front-End, a adoção de novas tecnologias se torna uma tarefa relativamente complicada pela necessidade de dar...

An introduction to CSS Methodologies: Naming Conventions and File Structures

CSS Methodologies are structured ways of writing and organizing your CSS and HTML. Adopting a standard convention has benefits across small and large projects, but choosing the right one can be...

CSS slideshows not working.

I have two separate slideshows that I want running at the same time. Right now I can only get one that will run at a time. While one is running, the other one disappears. Here is link to my code on...

Vodori Corporate Website

NOTE: Vodori has redesigned their website to align with their new brand direction since the original authoring of this post (Oct 12, 2015). The images and descriptions of Vodori do not reflect...

Independently Styling Underline Color

Styling Underline Color

Styling Underline Color

If you've ever wanted to set the color of the underline for underlined text separately from the text color, you may have come across the CSS...

Some Thoughts

I've been busy lately so I'd forgotten to post here. My apologies!!But I'd like to briefly tough on something. Namely jobs. Now when I started to learn to code over a year ago I thought...

Rainbow Egg Loader

This is a simple loader that moves rainbow colors across an egg shape.

Rainbow Egg Loader

CSS Grid Layout. Quick Start

CSS Grid Layout. Quick Start


Hi everyone! February-March 2017 has been remarkable for all those, working with HTML and CSS, owing to a number of updates, including the one for CSS. Now,...

Level up your Sass with the ampersand

When was the last time you wrote vanilla CSS? As a front end developer, it's hard to imagine a world without CSS preprocessors and all of the functionality they provide. They give us features...

Grid-dy With Excitement

Back in March of 2017, browsers began to roll out the much-anticipated CSS Grid Layout spec. It's something lots of people had been waiting for and it's glorious. It gives us freedom from...

How to build a Calculator in simple steps


Here is a simple HTML and css calculator

Como desenvolver mobile-first

Como desenvolver mobile-first

O desenvolvimento mobile first ainda é motivo de pesadelos para designers e desenvolvedores; Para designers porque pensam que terão que fazer um brainstorm totalmente...

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 who...

SCSS and CSS Grid Line Names

I've been working through Rachel Andrew's great set of video tutorials on CSS Grid Layout at http://gridbyexample.com/video/ (which I highly recommend!), but came across a weird problem.


CSS 的 hsla 颜色值使用指南

CSS 中有一种表示颜色值的方式,就是 hsla(Hue, Saturation, Lightness , Alpha)

Hue 指色调,Saturation 指饱和度,Lightness 指亮度,Alpha 指透明度。它们的取值范围如下:

色调:0~360。0/360 表示红色,120 表示绿色,240 表示蓝色。

饱和度:0.0%~100.0%。0.0% 是一样的灰色,100.0%...

Reverse Engineering Project Compass

My personal reflection answer to my Udacity Intro to Programming Course Stage 5 (Discover your Path).

  <!DOCTYPE html><html lang="en"><head> <meta...

Understanding Grid Display, Tracks And The New fr Unit.

This is a cross post from my blog enjoy!

Alright, so I'm going to be writing about the new snazzy CSS Grid property and all it's components. I'm going to try to do this in bite sized...

How To: Animated Gradient Line Icons in Pure CSS

Icons have gotten boring. When I started with vector icons it was a breath of fresh air: the ease of use, scalability, and speed were all superior. But now just about every website uses font...

Methods for Equal Height Columns

While looking over a competitor's newly designed website, I saw they were using float and an after element to make equal height columns. This got me to thinking about all of the different ways...

Onclick in pure HTML/ CSS


You've probably tried the :active pseudo selector and found that the styling is only given when the user is holding the mouse down. And so it is that it's not a very great...

















CSS gets a lot of stick, the internet is full of articles describing ways to fix one, or all of it's so called failings. Most of the time however, these criticisms are unfair, untrue or both....

Finding Unique colors in a slurry of stylesheets


I recently was moved to a new-to-me set of Agile teams and tasked with helping a project gain some consistency in design across two products. I'd been doing a bit of research on this...

Creating a keyboard with flexbox magic.

So, I recently made this pen.

Keyboard Debugger

I'm really happy with it. I realized, though,...

Processing color from stylesheets (continuation)


I'm a JavaScripter, let's just face it. I like the CLI and UNIX tools. Which is why I like Node. This next part I'm going to turn my attention to Node for processing my color lists...

Code Valentines

I made a bunch of goofy code joke Valentines for 2017, and figured I might as well post them here.


  You’re such &acute; that I can’t escape you
  <link rel="canonical attachment...

A sane way to set your web project colors

I am writing this article with the intention of sharing with others what i have learned working on various projects as a front-end developer. I'm sure most of you will read and nod the various...

Make A Youtube Video Responsive (The Easy Way)

Yesterday I was working on a product landing page as I work through the assignments for freeCodeCamp. One part of the assignment was to embed a product video. I embedded a video using the iframe...


border-radius 是一个简写属性。以下这三种写法等效:

border-radius: 50%;

border-radius: 50% / 50%;

border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;

它分别指定了盒模型四个角的四个内切椭圆的 rx 和 ry。

box-raduis 最终的结果就是这四个内切椭圆box-content...

CSS3 Columns

CSS 多列布局扩展了块级布局模式,可以简单地定义多列文本,最优的使用屏幕资源。最直观的一个视觉例子,就是报纸的布局。在多列块中,内容会自动从一列流到下一列。

有两个 CSS 属性 column-countcolumn-width ,意思很直观,前者设置特定列数,后者设置最小的期望列宽。如果只设置了 column-width 而没设置 column-count,...

css counter

对网页上的内容进行自动编号,两个属性 counter-resetcounter-increment



像写 markdown 一样写 html,只关注于内容

See the Pen counter by anjia (@anjia) on CodePen.

Flip Card Name

<!DOCTYPE html>

Dwiki Ikhwan's Card Name
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"><link...

你可能不知道的 CSS


font-display 控制字体在下载完成之前的渲染行为,在@font-face声明时用,据说可以提升体验提高性能来源 [1]

write-mode 定义文本行的排列方向,上下与左右来源 [1]

caret-color 可以改变任何可编辑元素的光标颜色,eg.input、textarea、contenteditable。在这个属性出现之前,想要模拟类似的效果,是强制文本透明-通过...

Sass Maps, Loops, and CSS word scrambling!

Note: To understand this tutorial, it definitely helps to have some preliminary knowledge of Sass/SCSS and Sass loops. We also use the checkbox hack in this tutorial, so knowing that can help too!



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...

Anime #CSS Rilis

.rilis { overflow: hidden;}.rilis h1 { font-size: 20px; border-bottom: 4px solid #DDD; padding-bottom: 5px; text-align: center; color: #555; text-transform: uppercase;}.schlist { float: left;...

Auto Image Sizing

There are some common problems with images, you want to use in teasers or other elements on your website.Usually you have to fight with your breakpoints, because your elements, teasers and others...

Difference Between Bootstrap 3 and Bootstrap 4

Component Bootstrap 3 Bootstrap 4
Source CSS Files



Primary CSS Unit



Media Queries Unit



Global Font Size



Default Fonts

Helvetica Neue,...


<!DOCTYPE html>

Gunes Tutulmasi
  <div class="gunes"></div><div class="ay"></div>

A Tiny, Full-Stack Feature (Part 1)

A Tiny, Full-Stack Feature (Part 1)

A Tiny, Full-Stack Feature (Part 2)

A Tiny, Full-Stack Feature (Part 3)

Many web developers are likely familiar with the general concept of CRUD. Yet, many of us...

css rotation animation



Tips for improving my SVG line infinite animation?

Yo CSS lovers...

I Created a simple line animation,

Any tips to make it cooler?

A Pen

nav bar slide

<!DOCTYPE html>

<![CDATA[body { margin: 0;}</p><p>navbar</p><p>{ background-color: #333; position: fixed; top: -50px; width: 100%; display:block; transition: top 0.3s;}</p><p>navbar a</p><p>{ float: left; display: block; color:...</p>]]>

Getting Dynamic with CSS Variables & Media Queries

Getting Dynamic with CSS Variables & Media Queries

I have clung with all but a death grip to my years-long love and use of Sass. But with rapidly advancing browser capabilities, React, and...

3 CSS techniques for border only in corners

Recently I needed to create headings with border only in the corners. I realized there are multiple interesting ways how to achieve this, so I decided to sum these up.

Technique #1: pseudo-elements


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...

Horizontal page slider

After exploring full page sliding in its vertical fashion, let's look at a more sophisticated and horizontal one.

We'll first look into a pure CSS one:

[[[pen slug-hash='rGoJgB'...

How to center icons within parent container

I am working with some legacy code right now and I see all variations of calculated paddings and margins to center icons in a parent container. Phew...

The simplest way to achieve this is to set...

CSS Fractured Text Effect

Inspired by Rachel Smith's #postAboutYourPen!

Earlier this year I started experimenting with CSS text effects. One of the first pens I created was the editable fractured text effect.

See the Pen...

Loading Spinner Collection

Here are some of my pure CSS loading spinners.Check it out:

Full Circle Spinner

[[[pen slug-hash='YEKoad' height='300'...

Sass Variable Scoping

A co-worker approached me with a curious question: "I've got a sass statement that I want to apply a variant to the parent, but still use it to house a class that I want to change based on...

CSS-only floating label

One of those nifty things Google did with the Material Design guidelines is include floating labels. Don't know what a floating label is? Check it out:

Floating label GIF

Being the ever-curious...

The Multi-Grid One-Page Layout - An experiment using Flexbox & CSS Grid with HTML5 Sections

The CSS GridI have found CSS Grid to be a fantastic way to layout a website. It can make the design, as well as the development of the front-end a million times faster and easier. I am a big fan!...

CSS Loader

Hello guys! Happy birthday to you!

Today i show you, how to make a loader

Let's get started!

   <div class="loader"></div>

This is a HTML example

   .loader { border: 16px solid...

Types of color codes used on the Web Formats 16,777,216 different color possibilities #DograsWeblog

CSS colors

The Cascading Style Sheets specification defines the same number of named colors as the HTML 4 spec, namely the 16 html colors, and 124 colors from the Netscape X11 color list for a total...

Starting FreeCodeCamp

Just started going through the FrontEnd Developers Certificat at FreeCodeCamp.org

My aim is to learn some new skills that I can use in my job responsibilities at Ride with GPS but also in my...

CSS property 'position' (Review)


Normal Document Flow

Does not interfere with other elements

The right, bottom, left, top and z-index properties has no effect


Normal Document Flow

May interfere with other...

6 Great Resources Every Beginning a Front-end Developer Should Bookmark

If you just get started your a front-end developer career, it might be overwhelming to learn something every day. To optimize your time, it might be useful to know solid resources, to keep up with...

Keep Learning New Things (A Post About Pug Js and 3d CSS)

Today I can say that I have used pug. I just followed a few simple steps on some tutorial, but I always want to try those things that seem like I'll never understand.

I also created a 3d square....

Thoughts on a Syntax for Element Queries

It's possible to think of Element Queries as a natural extension to CSS Media Queries. I would summarize the requirements for media queries like this:

a media type

query condition(s)

a stylesheet


Weird @extend side effects

I have this project that's using Bootstrap. Instead of importing the CSS and expanding the styles with my own, I'm importing the Sass styles and compiling to a single CSS file. It was upon...

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 Codevember...

Cookie-counter to stop css animation on second visit.

I need a cookie-counter that stops a css animation after the first visit. How is this done, I've found this code that i think might be close to what I need. But I'm new to javascript. can...

materializecss auto-fill for password input field

I found that for security reason materializecss framework (Release: 1.0.0-alpha.3) is not add ‘active’ class by default in password field to get auto focused.

So it act like overlap label in to...

Grow with Google Project: Animal Trading Cards

Project Overview

Simply titled, "Animal Trading Cards", this project combines the skills mastered in the problem set and asks to re-create a webpage from a design prototype.

This is a...

How to Prototype CSS Extensions

Trying to find ways to prototype new CSS features can sometimes be tricky. Some people choose the route of building (or writing plugins for) a CSS preprocessor for experimenting, some people design...

on mouse hove show hide content

<!DOCTYPE html>

  <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"...

PopUp simple, sólo HTML y CSS, sin JavaScript

PopUp simple, sólo HTML y CSS, sin JavaScript

PopUp 1

Title 1

Text 1

PopUp 2

Title 2

Text 2

Avoiding chaos when using Flexbox 'order'

A recent Twitter flurry provoked me to finally build a Flexbox demo I've been meaning to create since I first started playing around with CSS flex properties.

Roma Komarov posted an exploration...

CSS Selector 2018 | Avoid Using !important

Avoid Using !important

  .disabled {cursor: default !important;}p.btn {cursor: pointer;}


  .disabled.disabled.disabled {cursor: default;}p.btn {cursor: pointer;}

For better Under Standing Check this Pen...

Интригующие селекторы 4-го уровня CSS

Вольный перевод статьи Intriguing CSS Level 4 Selectors

CSS селекторы массово прогрессировали на протяжении многих лет и давали все новые возможности разработчикам, для построение свои страниц....

Launching the Front-End Tooling Survey 2018

TL;DR: Please take part in the 2018 Front-End Tooling Survey – I would massively appreciate it!

For the last few years, I've run a development survey called “The Front-End Tooling Survey”...

Hi, I'm Ethan

I'm new to CodePen, somebody introduced it to me when I complained that everything on my school assigned Chromebook is blocked. I'm an aspiring web developer and I'll most likely be...

Overlapping divs with browser resizing

"With CSS, if you remove the redundant height setting on the div then the divs won't overlap. If you don't want the divs to reposition on smaller windows, then set a minimum width on...