Posts tagged css3

Approaching Flexbox (A first trial blog post using Codepen)

Firstly I should mention that I have never used Markdown before. I am also excited by Codepen's new blogging feature and am wondering how I might be able to use this with my teaching. I thought...

Mi campo de luciernagas

Escogí que este fuese mi primer post en honor a dos cosas, primero el nacimiento de mi hija que de cariño le decimos Cocay que es el maya de luciernaga, y segundo, que finalmente estoy rehaciendo...

Una luna llena

A veces para un proyecto haces algo que en sí quedó bien, pero para el proyecto mismo no funciona. Tal cosa pasó con esta luna, he de decir, modestia aparte, que quedó bien pero a pesar de eso no...

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

Why Developers Should Be Excited About Famo.us

I've been going to meetups and talking with Developers about frameworks they use and often when I remark that we chose Famo.us/Angular to develop our web app at Mediahound, Inc. I often get a...

svg, background, animated, css3,


instead of

Look Ma, no CSS nor JS!!!

have svg frames

picture description


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

fuk da popo

this is an experiment combining several diferent aproaches to animation (Dec 2014) used on the web and in media production. i really hope to only scratch the surface while focusing on:


Hover Effects CSS3 (Efectos Hover en CSS3)

Vamos a ver como se crea un efecto Hover (Mouse por encima) con CSS3. Este se aplicará a los objetos que contengan una clase llamada "cambiar". Necesitaremos utilizar dos archivos, un...

Highlight asterix in placeholder w/ different color


Imagine designer designs a form where mandatory fields are highlighted using asterix and this asterix is a part of the placeholder. The issue begins when the asterix is highlighted by...

Fudging masks using CSS blend modes

(If you just want the code then jump over to this pen...)

One of the features I'm super excited about is masking using SVGs. But the limited support for masking or applying SVG filters to HTML...

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!

Optimizing CSS animations

Optimizing CSS animations

Animating well is core to a great web experience. You should always look to avoid animating properties that will trigger layout or paints, both of which are expensive and...

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

A CSS3 Responsive Grid you can Use Today

Alternate Titles: Why CSS3 Selectors are Awesome or Counting Elements in CSS3 or Faking Flexbox or CSS3 witchcraft


CSS3 selectors are just plain awesome. With the new selectors and a little...

Animowane svg

Animacje SVG były czymś, o czym długo myślałem, ale nigdy nie robiłem na poważnie. Do wczoraj.

Kończąc ikonkę w Sketchu i eksportując ja do SVG uświadomiłem sobie, że to przecież nic innego, jak...

Chaining transforms

Note : In this post I will assume you already know about CSS transforms. If not you can have a look there. To make things easier I will only use 2D transforms but the logic is the same with 3D.


Pure HTML/CSS Slide show


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

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

Мой хак для улучшения отображения трансформации css

Суть довольно проста, нужно добавить к трансформируемому элементу блюр 0.


Живой пример тут

Результат на лицо:

enter image description here

enter image description here



3D Animated Login

Anmiated Login using CSS3 and Javascript

I created a 3D animated login to become more feeling to a login form. This form is for "AJAX" based login, so the user will get feedback at all...


Esto es una prueba

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

How to locate separate elements in the group of blocks at the angle of 45 degrees in CSS3

For the Tipcow project, our designers were tasked with creating diamond-shaped blocks for the social network icons that moved in a zig-zag pattern. The quantity was not predetermined and the option...

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

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

Centralizar elementos com flexbox (css3)

Centralizar elementos com flexbox (css3)

Heart Pure Css3 (Coração Css3)

Ola pessoal, depois post Centralizar elemento verticalmente usando CSS, resolvi fazer este post para mostrar como centralizar...

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

Black & White + Open & Close

Videos, Code Examples, Resources, etc.


Video #1: Solution ... no code, just a 1 minute post coding overview of my solution.

Link: https://www.youtube.com/watch?v=iYrF_7SKpKU

Video #2:


HTML5 Local Storage

HTML5 Local Storage

Local storage is a replacement for cookies in js. If cookies can store data then why local storage then? One of the main reason is you can store upto 5MB of data in browser...

Create an interactive interface using your Fitbit’s data

In this experiment is created an interactive interface that displays real-time heart—rate and sleep tracking data from a Fitbit Charge HR.


In this article we will explore how you can...

Which are the most important css selectors?

Hey I recently posted this article at @designtheway but wanted to share a short version with my fellow Codepen members.

Its about Css selectors.

According to you which ones are most important css...

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

Utilizando medidas vw e vh (scrollX)

Alguns desenvolvedores assim como eu, já começamos a utilizar, as novas medidas de largura (vw), e altura (vh). Tendo como base nossa experiência com layout responsivo utilizando porcentagem (%)...








过渡(transition) 必须要触发才能执行

动画(animation) 则不用触发也可以执行


声明动画名称:animation-name:lyj; css div{ width: 300px;...

CSS3 icons based on 1 element

Learn how you can use border, border-radius and box-shadow to display different type of shapes without svg or graphics and they can be absolutely scalable. [[[pen slug-hash='PWLNBJ'...

Dynamic number of rows and columns with CSS Grid Layout and CSS variables

Creating responsive layouts back then, without the help of SCSS, was a pain in the ass. SCSS helped a lot. I always write my CSS framework from scratch instead of using Bootstrap, so I would...

CSS3: Transforms - Notes

CSS3: Transforms - Notes

The transform property comes in two different settings, two-dimensional and three-dimensional. Each of these come with their own individual properties and values.


GridBox Animation

See the Pen GridBox Animation by K.C.Ashish Kumar (@kcak11) on CodePen.

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

water shape css wave

  <div class="waveWrapper waveAnimation"> 

Task Managers

We all know its hard to find

Task Managers,

And I had always wanted to code one, but I had no knowledge. So I give you My taskmanagers, for those who need and use them, and in adition to that, you...

write your name with #cr7juve

write your name with #cr7juve with

CR7 - Juventus #cr7juve

Practicing Flex

Flexbox Practice

Made for practicing Flexbox. Nothing beats hands-on practice


#1 Flexbox Practice - Display

#2 Flexbox Practice - Flex Direction

#3 Flexbox Practice - Flex Wrap


clip-path Gitlab logo

A simple experiment with clip-path property.

CSS3 Transforms Tutorial

CSS3 Transforms Tutorial demo

In CSS's representation of Euclidean 3D space, X,Y,Z coordinates start at top left of a computer screen, with the positive direction...

Override inline !important

In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content...

Css3 HTMLl Style, New Html CSS code

Satta Matka

Get Fix Single Jodi and Fix Single Panna With Sangam
Only On Rs.3500/-
With 100% Money Back
Call Fast