CodeHQ

Archive for the ‘CSS’ Category

« Older Entries |

Flex – justify content: space-between fill white space

Sunday, April 14th, 2019

To get rid of the horrible spacing between the last two elements on a row of elements which are being aligned with 

justify-content: space-between

… try the following:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

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

@Supports CSS function

Friday, February 22nd, 2019

In this example .article-grid will be block unless the browser has support for display: grid, at which case, the styles within the @supports block will kick in and override the previous display declaration.

.article-grid {
    display: block;
}

@supports (display: grid) {
    .article-grid {
        display: grid;
    }
}

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

Find elements on page by their CSS Properties

Tuesday, February 12th, 2019

Drop this in to your console in dev tools and all elements with position: absolute will render with a border.

var absElements = [];
$("*").css("position", function(i, pos){
   if(pos==="absolute") absElements.push(this);
});

$(absElements).css({border:"5px solid red"});

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

SASS Mixin for fluid type sizes | CSS

Tuesday, June 26th, 2018

Add the following in your mixins .scss file:

// RESPONSIVE FONTS @include fluid-type(1.3rem, 1.7rem);
@mixin fluid-type($min-font-size: 1.3rem, $max-font-size: 2.2rem, $lower-range: 540px, $upper-range: 960px) {
  font-size: calc(#{$min-font-size} + #{(($max-font-size / ($max-font-size * 0 + 1)) - ($min-font-size / ($min-font-size * 0 + 1)))} * ( (100vw - #{$lower-range}) / #{(($upper-range / ($upper-range * 0 + 1)) - ($lower-range / ($lower-range * 0 + 1)))}));
  @media screen and (max-width: $lower-range) {
    font-size: $min-font-size;
  }
  @media screen and (min-width: $upper-range){
    font-size: $max-font-size;
  }
}

Then call that mixin within your theme .scss files with:

.div {
	@include fluid-type(1rem, 3rem);
	font-weight: 300;
}

Finally, make sure you set your html tag to have a set font-size as a percentage e.g. 62.5%…

html {
    font-size: 62.5%;
}

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

Slide up animation for active state | CSS

Wednesday, January 24th, 2018

This is a great addition to jQuery tabs, for when you want to animate the new active tab body.

@keyframes tabSlide{
	0% {
		opacity: 0;
		-moz-transform:translateY(30px);
		-webkit-transform:translateY(30px);
		-o-transform:translateY(30px);
		-ms-transform:translateY(30px);
		transform:translateY(30px)
	}
	100% {
		opacity:1;
		-moz-transform:translateY(0px);
		-webkit-transform:translateY(0px);
		-o-transform:translateY(0px);
		-ms-transform:translateY(0px);
		transform:translateY(0px)
	}
}

.active-tab {
	animation-name: tabSlide;
    animation-duration: 500ms;
    animation-timing-function: ease;
}

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

Highlight images with no alt tag

Thursday, November 16th, 2017

Use this snippet to highlight all images with no alt tag – good way to highlight everywhere you’ve missed a tag!

img[alt=""], img:not([alt]) {
	border: 5px solid red;
}

Original post below:

http://twitter.com/AllThingsSmitty/status/930617039085035520

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

Text-decoration-skip-ink | CSS | Control underlined text on descenders

Wednesday, August 16th, 2017

Ever wondered how you can stop underlines going over the top of descenders i.e. a word with letters that hang down… such as… empathy?

Underlined, that word looks like this empathy

In Chrome and Firefox it’s now possible! With text-decoration-skip…

 

.underline {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
}

The same word empathy now looks like this empathy

Enjoy.

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

Full page background video styles

Tuesday, June 13th, 2017

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

Default comments SCSS | WordPress

Monday, January 2nd, 2017

/* =========================================================
Comments
========================================================= */
.comments-area {
	padding: 20px 40px;
	 textarea#comment {
	    width: 100%;
    }
	#submit {
		@extend .button;
	}
	 ol.commentlist {
	
	     list-style:none; 
	     margin:0 0 1em; 
	     padding:0; 
	     text-indent:0;
	    
	
	 	li {}
	 	li.alt {}
		li.bypostauthor {}
		li.byuser {}
		li.comment-author-admin {}
	
	
		.comment-body {
			border-bottom: 1px solid #ddd; 
			padding:1em;
	
			.comment-author {} // end .comment-author
	
			
			div.vcard {
	
				font-weight: 14px;
				
				cite.fn {
					a.url {}
				 } // end cite.fn
	
				 img.avatar {
				 	border:5px solid #ccc; 
				 	float:right; 
				 	margin:0 0 20px 20px;
				 } // end .avatar
	
				 img.avatar-32 {} // end .avatar-32
				 img.photo {} // end .photo
				 span.says {} // ebd .says
	
			}  // end .vcard
	
			div.commentmetadata {} // end .commentmetadata
			div.comment-meta {
	
				font-size: 11px;
	
					a {
						color: #ccc;
					} // end a
	
			} // end div.comment-meta
	
			p {font-size: 12px;} // end p
	
			ul {
				font-size: 12px;
				list-style: none;
				margin: 0 0 0 20px;
			} // end ul
	
			div.reply {
	
				font-size: 11px;
	
				a {font-weight: bold;} // end a
	
			} // end reply
	
			 ul.children {
				list-style:none; 
				margin: 12px; 
				text-indent:0;
	
				li {} // end li
	
				li.alt {} 
				li.bypostauthor {}
				li.byuser {}
				li.comment {}
				li.comment-author-admin {}
	
				li.depth-2 { border-left: 5px solid #ccc; margin:0 0 10px 10px; }
				li.depth-3 { border-left: 5px solid #bbb; margin:0 0 10px 10px; }
				li.depth-4 { border-left: 5px solid #aaa; margin:0 0 10px 10px; }
				li.depth-5 {} // you get the idea
	
				li.odd {} // end .odd
	
			}  // end ul.children
	
		}  // end li.comment
	
		li.even {background:#fff;}
		li.odd {background:#f6f6f6;}
		li.parent {border-left:5px solid #ddd;}
		li.thread-alt {}
		li.thread-even {}
		li.thread-odd {}
	
	 } // end commentlist
}

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

Introducing the CSS text-align-last Property

Saturday, July 9th, 2016

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

Next Page »