List Code

video embed tag

to embed a video in a web page example Video not suported, download it here. code <video width="100%" height="340" preload="none" poster="myImage.jpg" autoplay loop controls&g..

video embed no controls

embed a video, for use as a background or a slide element, or wherever you need a large video. I found that there was a bug in chrome (which is probably fixed now) that was ignoring the autoplay tag ..

form elements new zealand region list

A list of the Regions of New Zealand converted into a form element select option dropdown. Sorted in alphabetical order. Demo Please Select Auckland Bay of Plenty Canterbury Gisborne..

foundation includes cdnjs

Foundation Full Full Foundation CSS <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css"> Minified Foundation CSS <link rel="stylesheet..

use an image to replace bullet in ul list

How to replace the default bullet with an image in a ul tag .widget ul, .page-content ul { list-style-image: url('images/favicon.png'); }

using mix blend mode and filter grayscale for hero

border box reset

with a bonus transition to all * { box-sizing: border-box; transition: all 0.2s; }

css grid sidebar main content fluid layout with fallback

this is a continuation from the original post with added fallback for older browsers that do no support the grid elements yet. I have tested this fallback in IE11 and it seems to work well, if you wa..

bootstrap styled buttons

Just in-case you would like the shiny (flat/rounded) blue buttons from bootstrap without all the css. Example Button add the class btn and btn-primary to your link An Example Primary Button (bt..

color cycle drop shadow

Just incase you are bored with a static shadow, here you can cycle through a bunch of different shadow colours. .cycle-shadow { -webkit-animation:img-cycle 3s infinite; animation:img-cycle 3s i..

embed and use a ttf font font face

Handy if google fonts does not have your required font and you have the correct licence for showing it on your site... ;) css /* Include the font, you can call it whatever you like */ @font-face ..

filter drop shadow

using a filter drop shadow can add shadow to transparent areas of a png filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.9));

animate css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> animate.css

css grid sidebar main content fluid layout

I was playing around with css grid the other day and i found a nice (and easy) way to do a standard left sidebar and fluid main content area. this is rather than floating the sidebar and then setting ..

truncate text long titles with text overflow ellipsis

this one can be useful for fitting text into smaller places without it looking broken. text-overflow: ellipsis; this basically adds the 3 dots where the end of the text used to be... Also if you are ..

transitions and the easy way to apply them

Would you like your element to transition nicely? well you can do it in about 1 line of css. .transition { transition: all 2s; } This is the one I usually use, as its not too slow. transitio..

cycle color using background

I found this the other day (well today actually) and i wanted to see how it worked. background-image: -webkit-linear-gradient(left,#D68AB0 0%,#D8CE5D 25%,#6BD85D 50%,#5DB9D8 75%,#D85DCB 100%); ..

css grid for layouts with no rows

I had a look at this recently, but my previous example still used rows for a grid, which apparently is not the correct way of using css grids. I think the issue (I had) with css grid is it seems co..

foundation make row full width

Just incase you want a full screen width layout and still have it sitting in rows for foundation css .full-width { width: 100%; margin-left: auto; margin-right: auto; max-width: in..

angled divider line

I've seen this a few times now where the dividers on a site were at an angle, just to mix things up a bit and was wondering how hard it would be. angled divider example

css grid for layouts and how to use it

Note: Added version 2 of this with no rows for the grid css grid for layouts with no rows so there is this thing called the CSS Grid Layout, and apparently we dont need a framework for grids anymore...

recreate marquee element using css

as the marquee element has been removed from html5 (which is probably a good thing) its now unsupported, but you can use css and keyframes to recreate it. Yay.. CSS Marquee Demo Some Marquee ..

click through an overlay element pointer events

This one is usefull if you have an element overlapping another element and you want the one underneath to be clickable, like positioning an image over the top of a slider with controls underneath it. ..

why are people so amazed that a column layout can have a full width element

Is it because its inside a grid still? i must me missing something anyway i have been noticing that there is this post (and this one) going around showing that you can break out of a css grid and go ..

margin padding framework

Just a quick margin and padding framework that i came up with, to make margins padding and basic styles a bit quicker. Usage Example margin-padding-example.html

more complex responsive tables css

i did a simple version of this before here but now im going to make it a bit more complicated and functional. table { width: 100%; border-collapse: collapse; } tr:nth-of-type(odd) { ..

remove border glow css from textarea on select

how to remove the glow around a text area when selected or in focus using css. Text Area Highlight Here is what it looks like just to show you where the textarea is while editing, but can look m..

transform rotate an element in css

good if you need to rotate elements using css code <div class='abox rotated'></div> <style> .abox { background:pink; height:150px; width:150px; margin:50px auto 0; }..

transform rotate a hexagon in css

if you ever needed a hexagon in css here is how you can do it. code <style> .hexagon { position: relative; width: 250px; height: 144.34px; background-color: #64C7CC; margin..

target internet explorer with css and html

target all internet explorer versions with this <!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> target ie 10 and 11 p { col..

darken background image using css

darken a background image using css only useful if you have overlay text or just want to add a nicer effect to an image, i usually find that adding this to an image with the text over the top makes it..

material design icons google font

you can just link to this like a font in your header how do we use the icons? <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> this one should ..

flex align center vertical horizontal

lets say you have a box within another box, like so: .box { height:500px; width:500px; background:#CCC; } .another-box { height:50px; width:50px; background:#999; } ..

targeting the printed version of a page with media print

there are 2 ways to target the printed version of a webpage, you can do it with a @media print query inside your css, or you can link the whole style sheet and target the print media. target print ..

simple dropin wordpress dropdown navigation css

this is good if you just want to drop in some css and get a dropdown navigation back using the default wordpress nav example of the default styles code (css) /* Menu Dropdown */ .nav ul { l..

make your images look non squished when not using image backgrounds

i deal with a lot of sites where they have a bunch of images listed and sometimes they can end up looking a bit sqashed unless you add a div and set the height and width of it. this method is fine u..

css accordion basics

can we create an accordion with out using jquery ui? I think yes, it will be basic but also keeping it simple it probably a good idea. tried adding transitions to make the divs showing a bit smooth..

use font awesome on elements lists ul

good if you need to use font awesome in list items like ul lists, etc. .element { position: relative; } /*replace the content value with the corresponding value from the list below*/ ..

set transparent menu over background image

this is probably obvious, but i found it useful for those themes that look nice with a semi-transparent header sitting over the top of an image. I think ill do this as an external example, as its e..

table border collapse

I see this quite often when dealing with tables the border-collapse: collapse; used on a table as so: table { border-collapse: collapse; } So what is the point of doing this? It seems to help..

stack a table using css responsive

this can be useful for fitting tables into smaller screens, usually add this to a media query. #tableid td { display: table-row; width:100%; display:block; } and with a screen size added @me..

design nice block header

I saw this the other day and thought the color scheme looked quite nice. Ill see if i can replicate it here. @import url('https://fonts.googleapis.com/css?family=Raleway:300'); .mid-header { ..

wordpress get template directory

Get the current theme directory, good for use in wordpress templates. <?php echo get_template_directory_uri(); ?> Usage Example To link to an image located in the theme directory <..

check the server method post or get using php

Here is a basic usage method for checking if the server is in post or get mode. most normal pages are served in get mode. You can send data back to a page using get by adding variables to the string ..