css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Posts tagged html5

On Handlebars and template tags

Handlebars is awesome. I can separate my template logic from my application logic? Yes, please. When I try to use Handlebars in my local editor, though, it vomits all over those ugly <script>...

How to Create a cross browser favicon for your HTML5 website

Creating a cross browser favicon for your HTML5 website

You need 14 lines of HTML if you want a favicon that works across devices and all resolutions. 40% of the most visited websites have no...

Form with Geolocation

OBS: You can read this post in Portuguese here: http://tribodoci.net/artigos/formulario-com-geolocalizacao/

Every day we fill out forms on the web, and we know it sucks. For example, why we always...

<dialog> with animation

What's <dialog>

Currently (as of July 2014), Chrome supports dialog element. Please refer dialog element demo

My demos are working on Chrome 38 canary.
Update: My demos are working on...

HTML5 Video Position Saving

playback code screeny' class="post-image

One last feature I wanted to land for DVD Pila! 1.0 is saving where in a video a user left off, and be able to start from where they left off once they play...

code explanations

Some Sample Pens but not what they were intended to be. Will fix when I get the chance otherwise there just 3 randoms for the most part enjoy?

3D Rotating Objects, Stones Flag via .SCSS


Portfolio Site Up

Just realized that it's been two days since I posted in this blog. I had a streak going of a few months there, but this weekend we had company over, actually two sets of company, and totally...

responsive html5 video using video-js

responsive html5 video using video-js

This is a simple example of how to implement Video in your static project by leveraging the fantastic open source video-js. I have a few versions floating...

Signing Forms

Back to work on adjusting the worlds largest HTML form. I've been editing the text and fields to make them friendly to being on the Internets and not filled out by hand. Surprising how many...

Pure CSS Transparent Image Under Text with Scaled Background Image

Pure CSS Transparent Image Under Text with Scaled Background Image

2015 updated examples!

A quick example of making use of the background clip property for webkit browsers staying as functional as...

HTML5 - immár W3C ajánlás

Pár évvel ezelőtt még elég óvatos volt a legtöbb webmester, sitebuilder, ha a HTML5 elemeinek, tulajdonságainak használata került szóba. Ez zömében a böngészőknek volt köszönhető, hiszen 4-5 éve a...

Ambient make use of HTML5 sections & outlines for semantic scaffolding and CSS3 attributes on elements for page layout.

Sometimes I have UI that plays well with a traditional grid paradigm but sometimes I need a more complex grid. This can mean learning grid classes for structure with floats, columns and media...

Fun with fullscreen

I had to do a little research into the HTML5 Fullscreen API for work this past week. I ended up creating a couple utility classes that I thought could be shared.

I needed to manage the visibility...

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

Video HTML5 Iframe

A Pen

Easy Use

Simple Css & Js Codes

Before you use this sample, Make sure that you are creating a new page "blank" for only the iframe. Thank...

Article Teasers and SEO Relevance/Dangers?

This is a call to all of you smart developers who have worked on sites with landing pages full of teasers that each lead to a unique content (ex: news article, video) page. I will REALLY appreciate...

Canvas Trails

I will NEVER get tired of this very old but very awesome trick. It's simple:

Use a transparent rect or transparent pixels to clear the buffer of your graphics program. The result is you get...

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

Building animated Mondrainesque images in html5 canvas

Trying for a while to make this work. This is the current state:

mondrian's js canvas

First I was able to generate random lines that stretch from side to side,...

HTML5 CurrentTime and Frame Numbers

I recently had the opportunity to dive into HTML5 video and I quickly realized how powerful and customizable it can be. I was building a simple interactive player with looping and chapters. When...

Don't be Afraid of the Picture Element

Images have a huge impact on a website's performance, simply due to their file size and type. Thankfully, today, we have ways to deliver the best option to users. When we stop and think about...

Building an HTML5 app for iPad

a.k.a. Building a custom keyboard with CSS

A while ago I was curious to see if I could make clicking a button on a web page generate a noise in the browser that wasn’t a pre-recorded audio file....

Jumpy or how to code a gravity [from scratch]

Alright. I have never wrote any blogposts before especially on programming... Especially not on my native speaking language. But wth lets give it a try. Most of things I know about coding I got...

Rails Audio Player with React

react audio' class="post-image

React.js and Rails

I’ve used React.js with Rails for a couple of little projects, but when it came time to add Album/Playlist player controls to a “header” element...

Canvas Gamepad


So you want to add a gamepad to a html5/canvas based app in html5

npm i html5-plugin-canvas-gamepad

CanvasGamepad setup and configurations

in you html file add CanvasGamepad.setup()...

Html and SVG Animation curly line

<!DOCTYPE html>

Page Title

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


<?php if (!$_POST['submit'])


$quebra_linha = "\n"; $emailsender = "email@queenvia.org"; $nomeremetente = $_REQUEST['inputName']; $emaildestinatario =...

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

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

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


CSS linear-Gradient


  <div>some text</div>
  div { /* defualt angle: top  bottom / / 050%: pure color(transparent),50%100%: pure color(mint) / / if second % > first %, display...

nav bar with logo

HTML5 <footer> element

<footer> element:As per the HTML5 rule the footer of any website should only contain some links,author inforamtion and the copyright and it must not contain any important information like the...

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

Edx First Web page

<!DOCTYPE html>

My Website
   <h1>Three Great Quotes</h1> <h2>From Three Great Leaders</h2> <ul> <li><q>Some know the value of education by having...

Getting two-dimensional coordinates from a one-dimensional array

If you're working in the 2D canvas context, and you'd like to fill your canvas with objects on both x and y axes, you might not need to reach for nested for loops! It's possible to get...

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

How to build an audio player with HTML5 and the Progress element

HTML5 introduces built-in media support with the audio tag, which makes it very easy to embed media straight into any HTML document with limited code. It comes with built in browser controls, if...

Image not loading

<!DOCTYPE html>

LoopLAB Theme

Build social profiles and gain revenue and profits

Lorem ipsum dolor sit amet,...

A Drag & Drop example with React and HTML5 API


Recently, in one of my React project, I needed to add a Drag and Drop (D&D) feature to allow my users to manually sort a default list of data boxes (Stock Exchange data) in order...

Hovering effect

Check up this awesome hovering effect

css animation