Wednesday, October 4th, 2017
For use on decorative elements – this is so accessibility is not spoiled by non-important content elements.
div class="foo" aria-hidden="true" role="presentation">
This …aria-hidden=”true” role=”presentation”… is important.
Tags: accessibility, Aria-hidden, HTML, presentation, role
Posted in HTML | No Comments »
Tuesday, June 13th, 2017
Tags: Background video, Full page, video
Posted in CSS, HTML | No Comments »
Friday, March 6th, 2015
All of the icons/tiles you will need – if you want to save some time, use this awesome generator here – iconogen.com
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<meta name="msapplication-square70x70logo" content="/smalltile.png" />
<meta name="msapplication-square150x150logo" content="/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="/widetile.png" />
<meta name="msapplication-square310x310logo" content="/largetile.png" />
Posted in HTML | No Comments »
Thursday, February 26th, 2015
Solved this putting a div with an .overlay exactly before each Google map iframe insertion. The div will cover the map, preventing pointer events from getting to it. But if you click on the div, it becomes transparent to pointer events, activating the map again!
The markup
<html>
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>
The CSS
.overlay {
background:transparent;
position:relative;
width:640px;
height:480px; /* your iframe height */
top:480px; /* your iframe height */
margin-top:-480px; /* your iframe height */
}
Update:
There is a jQuery solution for this if you do not embed the map via iFrame.
$(function() {
$('#map').click(function(e) {
$(this).find('.gm-style').css('pointer-events', 'all');
}).mouseleave(function(e) {
$(this).find('.gm-style').css('pointer-events', 'none');
});
})
And a little bit of CSS
.gm-style {
pointer-events: none;
}
Tags: Bug fix, Google, Maps, scroll
Posted in CSS, HTML, jQuery | No Comments »
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: CSS, Google, HTML, Maps, Responsive
Posted in CSS, HTML | No Comments »
Tuesday, December 23rd, 2014
The HTML
<h1 class="bgClip">Clip Text</h1>
The CSS
.bgClip {
background:url('../images/clouds.jpg');
background-repeat:repeat-x;
background-position:0 0;
font-size:200px;
text-transform:uppercase;
text-align:center;
font-family:'Luckiest Guy';
color:transparent;
-webkit-font-smoothing:antialiased;
-webkit-background-clip:text;
-moz-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
margin:0;
If you want to animate it
-webkit-animation:BackgroundAnimated 15s linear infinite;
-moz-animation:BackgroundAnimated 15s linear infinite;
-ms-animation:BackgroundAnimated 15s linear infinite;
-o-animation:BackgroundAnimated 15s linear infinite;
animation:BackgroundAnimated 15s linear infinite;
}
@keyframes BackgroundAnimated {
from {
background-position:0 0
}
to {
background-position:100% 0
}
}
@-webkit-keyframes BackgroundAnimated {
from {
background-position:0 0
}
to {
background-position:100% 0
}
}
@-ms-keyframes BackgroundAnimated {< from {
background-position:0 0
}
to {
background-position:100% 0
}
}
@-moz-keyframes BackgroundAnimated {
from {
background-position:0 0
}
to {
background-position:100% 0
}
}
Posted in CSS, HTML | No Comments »
Monday, December 15th, 2014
<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
Posted in HTML | No Comments »