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...
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...
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...
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....
A Pen
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...
simple
instead of
have svg frames
animated
[[[pen slug-hash='dPpWyX'...
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:
...
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...
Introduction
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...
(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...
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..
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...
(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:...
炫酷 loading tips
Alternate Titles: Why CSS3 Selectors are Awesome or Counting Elements in CSS3 or Faking Flexbox or CSS3 witchcraft
Intro
CSS3 selectors are just plain awesome. With the new selectors and a little...
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...
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.
...
<ul id=banner> <li class=slide-1></li> <li class=slide-2></li> <li...
Introduction
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...
Суть довольно проста, нужно добавить к трансформируемому элементу блюр 0.
filter:blur(0px);
Результат на лицо:
enter image description here
enter image description here
ссылки:
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...
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...
A Pen
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...
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 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...
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...
Videos, Code Examples, Resources, etc.
Videos
Video #1: Solution ... no code, just a 1 minute post coding overview of my solution.
Link: https://www.youtube.com/watch?v=iYrF_7SKpKU
...
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...
In this experiment is created an interactive interface that displays real-time heart—rate and sleep tracking data from a Fitbit Charge HR.
Introduction
In this article we will explore how you can...
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...
Intro:
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...
A Pen
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 (%)...
动画和过渡的异同
相同点
过渡和动画都是给元素添加动画的
过渡和动画都是CSS3新增的属性
过渡和动画都需要满足三要素才能有动画效果
不同点
过渡(transition) 必须要触发才能执行
动画(animation) 则不用触发也可以执行
创建一个CSS3动画
声明动画名称:animation-name:lyj; css div{ width: 300px;...
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'...
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
The transform property comes in two different settings, two-dimensional and three-dimensional. Each of these come with their own individual properties and values.
Vendor...
See the Pen GridBox Animation by K.C.Ashish Kumar (@kcak11) on CodePen.
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...
<div class="waveWrapper waveAnimation">
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 with
Flexbox Practice
Made for practicing Flexbox. Nothing beats hands-on practice
Container
#2 Flexbox Practice - Flex Direction
A simple experiment with clip-path property.
In CSS's representation of Euclidean 3D space, X,Y,Z coordinates start at top left of a computer screen, with the positive direction...
