Pens from Estefani https://codepen.io/estefanirangel/ en nospam@codepen.io Copyright 2024 2018-01-19T07:23:38-07:00 Chessboard Generator https://codepen.io/estefanirangel/pen/RxEppB https://codepen.io/estefanirangel/pen/RxEppB Estefani

See the Code - See it Full Page - See Details

]]>
Chessboard Generator 2018-01-19T07:23:38-07:00
Make a whole div clickable https://codepen.io/estefanirangel/pen/YEqBMb https://codepen.io/estefanirangel/pen/YEqBMb Estefani

See the Code - See it Full Page - See Details

Based on http://stackoverflow.com/questions/796087/make-a-div-into-a-link

]]>
Make a whole div clickable 2017-11-05T05:21:06-07:00
Hamburger Menu - HTML, CSS & jQuery https://codepen.io/estefanirangel/pen/mBgaPX https://codepen.io/estefanirangel/pen/mBgaPX Estefani

See the Code - See it Full Page - See Details

A simple hamburger menu example using html, css & jQuery.

]]>
Hamburger Menu - HTML, CSS & jQuery 2017-10-22T21:25:24-07:00
Clip-path: Diamond grid https://codepen.io/estefanirangel/pen/rGVMZe https://codepen.io/estefanirangel/pen/rGVMZe Estefani

See the Code - See it Full Page - See Details

This demo uses clipping paths to create a diamond grid. Part of a demo for a Smashing Magazine article published in May 2015 titled "Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box".

]]>
Clip-path: Diamond grid 2017-09-15T02:39:06-07:00
Clip-path: Diamond grid https://codepen.io/estefanirangel/pen/MEwjqY https://codepen.io/estefanirangel/pen/MEwjqY Estefani

See the Code - See it Full Page - See Details

This demo uses clipping paths to create a diamond grid. Part of a demo for a Smashing Magazine article published in May 2015 titled "Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box".

]]>
Clip-path: Diamond grid 2017-09-15T02:39:01-07:00
FullScreen YouTube Video Background In Pure CSS https://codepen.io/estefanirangel/pen/zNovbE https://codepen.io/estefanirangel/pen/zNovbE Estefani

See the Code - See it Full Page - See Details

[Full explanatory article on my site](http://thenewcode.com/500/Use-YouTube-Videos-as-Fullscreen-Web-Page-Backgrounds).

]]>
FullScreen YouTube Video Background In Pure CSS 2017-01-17T04:18:27-07:00
Flexbox playground https://codepen.io/estefanirangel/pen/MbPgEx https://codepen.io/estefanirangel/pen/MbPgEx Estefani

See the Code - See it Full Page - See Details

]]>
Flexbox playground 2016-12-13T08:16:19-07:00
Adding items https://codepen.io/estefanirangel/pen/ObjeNB https://codepen.io/estefanirangel/pen/ObjeNB Estefani

See the Code - See it Full Page - See Details

]]>
Adding items 2016-11-28T09:16:48-07:00
Learning AJAX https://codepen.io/estefanirangel/pen/ObjVww https://codepen.io/estefanirangel/pen/ObjVww Estefani

See the Code - See it Full Page - See Details

]]>
Learning AJAX 2016-11-26T01:59:13-07:00
Background image gradient overlay https://codepen.io/estefanirangel/pen/bBBMeQ https://codepen.io/estefanirangel/pen/bBBMeQ Estefani

See the Code - See it Full Page - See Details

Using the :after element to add a gradient overlay to a background image. Blog post: http://alexcarpenter.me/blog/2013/background-image-gradient-overlay

]]>
Background image gradient overlay 2016-11-17T21:37:58-07:00