Best pure-css Web Design, UI Inspiration, resources & Tutorials with Demo

Pure CSS Shapes

CSS3 is great, check how you can create variated geometric shapes, with only CSS code. The most powerfull is by after and before selectors.

#Pure CSS #UI

20+ PureCSS Call-to-Action Animated Buttons for inspiration

A call to action  is an instruction to the audience to provoke an immediate response, usually using an imperative verb such as "call now", "find out more" or "visit a store today". Having an effective call to action

#Buttons #Inspiration #Pure CSS #CSS2 / CSS3

CSS first-child, last-child and nth-child in one Example

When we need access through a specific DOM element with CSS, these selectors may be useful :first-child The first-child pseudo selector matches the first element directly inside its containing element firts-child Usag

#CSS #Pure CSS #CSS2 / CSS3 #HTML 5

Pure CSS Text Animation effects

Check this cool css3 text animations that you can use in your webs. HTML5 creative text animation that you can copy and paste from owr code editor. With Pure CSS and HTML you can create simil after effect text animation

#UI #HTML 5 #Pure CSS #CSS

HTML code CSS Background Image Property

The background-image property defines the background image of an element. The background of an element is the total size of the element, this including padding and border. We will demonstrate its use through a series of

#CSS #CSS2 / CSS3 #Pure CSS

15+ Pure CSS Image Hover Examples

Image Hover effect is mostly used in designs for improving styling and usability. Hover effects add extra info to websites and enhance the experience of the users. If you are a web designer and looking for some great PU

#CSS2 / CSS3 #Pure CSS #HTML 5

Hamburger Responsive Menu (Pure CSS)

FullScreen Responsive Menu (Pure CSS), this is the first of multiple components that we will develop for use in our own simple css Framework. It can be used with only grid system bootstrap template or in any project

#Pure CSS #Modal #Menus #CSS2 / CSS3

Special Christmas html5 Code Snippets

If you want to dress up your website for Christmas these html5 code snippets are just the thing for you. Pure CSS Happy holidays See the Pen Happy Holidays! by Ana Travas (@anatravas) on CodePen. Html5 XMAS preloade

#HTML 5 #Pure CSS #CSS2 / CSS3 #CSS #Animation

How pure css animation background

Today more than a solution I bring a challenge. I am trying to make an infinite full-screen background animation using only CSS. When we use cover property (for fullscren background image) we do not have a fixed width of

#Playground #Pure CSS #Animation #Backgrounds

CSS3 animation loop Sprite (with keyframes)

Hi guys, I'm going to start a series of tutorials to enter the world of html5 game programming. Today we will learn to animate a sprite using the fantastic power of keyframes (Pure CSS javascript nothing) and as i love W

#CSS2 / CSS3 #Pure CSS #HTML5 Game

Pure CSS Beautiful Bokeh Christmas lights Animated

In photography, bokeh is the aesthetic quality of the blur produced in the out-of-focus parts of an image produced by a lens. Bokeh has been defined as "the way the lens renders out-of-focus points of light". With this&

#Backgrounds #Textures #Pure CSS #CSS2 / CSS3 #Animation

Pure CSS Flashing Christmas Tree with Sass

Simple Pure CSS Animation Flashing Christmas Tree with Sass. Use this snippet in your Christmas web design project See the Pen Flashing Christmas Tree with Sass by Michelle Barker (@michellebarker) on CodePen.

#Animation #Pure CSS #CSS2 / CSS3

Pure CSS Animation Hover for blissful Santa

Simple Pure CSS Animation on Hover Event. Use this snippet in your Christmas web design project See the Pen Waving Santa by ZeroSpree (@zerospree) on CodePen.

#Animation #Pure CSS #CSS2 / CSS3

How to Build Pure CSS Android Logo

Android logo made in CSS3 with hover animations using CSS3 transitions Html  <div class="android">     <div class="head">         <div class="l_ant">

#Playground #Pure CSS #CSS2 / CSS3

Vinyl Cover Animation (Pure CSS)

Hi Guys, we take a PUNK :) album vinyl cover, a little HTML, and some CSS3 transitions and transforms Hover to create a  vinyl animation effect for showing off the music you love. index.html The Markup will c

#Pure CSS #Animation #UI #Playground

Pure CSS Apple Devices Playground

Pure CSS Apple Device Generator (purecssapple.com) is a playground micro site to Create an Apple device with only CSS. No image, just code. iMac, Mac Book, iPad, iPhone version 4, 5 and 6 included.

#Pure CSS

Pure CSS Simple Metro Station Map

Today we’d like to share some CSS3 experiments with you. The idea is to use some CSS3 selectors as ::after & ::before and transform property in different scenarios. In this post, we’ll give an overview of

#CSS2 / CSS3 #UI #HTML 5 #Pure CSS

How to Create a Pure CSS Dropdown Menu by webdesignerhut

In today’s tutorial I’ll take you over the steps of creating a pure css dropdown menu. We’ll be using CSS2.1 properties mostly. Altho I’ll show you an extra little trick to add a + icon to those n

#Menus #Pure CSS #CSS2 / CSS3

Only CSS3 Animated Social Icons with Font Awesome

Hi guys, today we put together for you an indispensable resource on any website. They can use it on any part of your site by simply copying and pasting the code of our demo. Font Awesome gives you scalable vector icons

#CSS2 / CSS3 #Pure CSS #Buttons #UI