CodeHQ

Posts Tagged ‘CSS’

| Newer Entries »

WordPress OEmbed – responsive video

Thursday, February 18th, 2016

Adds a container around iframes to allow responsive video when utilising WordPress OEmbed functionality.

jQuery

$("iframe").wrap("<div class='iframe-container'/>");

SCSS

.iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

Original source

Tags: , , , , ,
Posted in CSS, WordPress | No Comments »

Pulsing heart | CSS

Monday, January 11th, 2016

.heart {
    position: relative;
    width: 34px;
    overflow: inherit;
    -webkit-animation: animateHeart 2.5s infinite;
    animation: animateHeart 2.5s infinite;
}
.heart:before,
.heart:after {
   position: absolute;
   content: '';
   top: 0;
   left: 17px;
   width: 17px;
   height: 27px;
   background: #3C948B;
   border-radius: 50px 50px 0 0;
   -webkit-transform: rotate(-45deg) translateZ(0);
   transform: rotate(-45deg) translateZ(0);
   -webkit-transform-origin: 0 100%;
   transform-origin: 0 100%;
}
.heart:after {
   left: 0;
   -webkit-transform: rotate(45deg) translateZ(0);
   transform: rotate(45deg) translateZ(0);
   -webkit-transform-origin: 100% 100%;
   transform-origin :100% 100%;
}

@-webkit-keyframes animateHeart {
  0%  { -webkit-transform: scale(1); }
  5%  { -webkit-transform: scale(1.2); }
  10% { -webkit-transform: scale(1.1); }
  15% { -webkit-transform: scale(1.3); }
  50% { -webkit-transform: scale(1); }
  100% { -webkit-transform: scale(1); }
}
@keyframes animateHeart {
  0%  { transform: scale(1); }
  5%  { transform: scale(1.2); }
  10% { transform: scale(1.1); }
  15% { transform: scale(1.3); }
  50% { transform: scale(1); }
  100% { transform: scale(1); }
}

Tags: , , ,
Posted in CSS | No Comments »

Full-screen and centralised responsive video | CSS

Thursday, October 29th, 2015

.video {
	position: absolute;
	top: 50%; 
	left: 50%;
	z-index: 1;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
}

EDIT: Another method I found and am trying is this CSS based responsive video that keeps the 16/9 ratio.

Tags: , , , ,
Posted in CSS | No Comments »

Priority navigation

Thursday, May 7th, 2015

Tags: , , , ,
Posted in CSS, HTML, jQuery | No Comments »

Image alignment properties in WordPress

Tuesday, April 14th, 2015

Add this to your CSS to allow align left, right, center and none to images in WordPress posts and pages.

.alignright {
	float: right;
	padding: 10px 0px 10px 10px;
}
.alignleft {
	float: left;
	padding: 10px 10px 10px 0px;
}
.aligncenter {
	clear: both; 
	display: block; 
	margin-left: auto; 
	margin-right: auto;
	padding: 10px;
}
.alignnone {
	padding: 10px 0;
}

Tags: , , , , , ,
Posted in CSS | No Comments »

Pure CSS Checkbox Image replacement

Friday, March 27th, 2015

Use this method for replacing a standard checkbox input with an image or styled box.

The markup

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>

The CSS

input[type=checkbox] {
    display:none;
}
input[type=checkbox] + label {
    background: #999; //colour or image
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label {
    background: #0080FF; //colour or image
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Tags: , ,
Posted in CSS | No Comments »

Responsive tables

Thursday, March 5th, 2015

Original article

Add this in to a media query and you’ll be sweet. Adjust as necessary for padding/colours/fonts. 

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "First Name"; }
	td:nth-of-type(2):before { content: "Last Name"; }
}

Tags: , , ,
Posted in CSS | No Comments »

Responsive Google maps

Monday, February 23rd, 2015

The CSS

 .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

The HTML

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

Tags: , , , ,
Posted in CSS, HTML | No Comments »

« Previous Page