Best pure-css Web Design, UI Inspiration, resources & Tutorials with Demo
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
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
When we need access through a specific DOM element with CSS, these selectors may be useful
The first-child pseudo selector matches the first element directly inside its containing element
#CSS #Pure CSS #CSS2 / CSS3 #HTML 5
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
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
Curated Collection of free HTML and CSS arrow source code examples: css arrow shape, triangle, line, buttons, animated
CSS Triangle Shapes
We can create simple triangular shapes with css using its border property
#Pure CSS #HTML 5
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
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
Pure CSS Happy holidays
See the Pen Happy Holidays! by Ana Travas (@an
#HTML 5 #Pure CSS #CSS2 / CSS3 #CSS #Animation
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
#CSS2 / CSS3 #Pure CSS #HTML5 Game
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".
#Backgrounds #Textures #Pure CSS #CSS2 / CSS3 #Animation
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
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
Android logo made in CSS3 with hover animations using CSS3 transitions
#Playground #Pure CSS #CSS2 / CSS3
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.
The Markup will c
#Pure CSS #Animation #UI #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.
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
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
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