Showing posts from: CSS

July 8, 2016

SCSS Mixin for Text Shadows

Another simple SCSS mixin for setting text shadows on an element, includes parameters for:

  • X Offset
  • Y Offset
  • Blur
  • RGBA Color
@mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) {
    text-shadow: $x $y $blur $color;
}

Usage

.h1{
@include text-shadow(2, 2, 5, rgba(0,0,0,.4))
}
June 5, 2016

SCSS Mixin for Preloading Images with Cross Browser Opacity

Preloading Images with Cross Browser Opacity A simple SCSS mixin here for setting the opacity on preload to 0, and when the image is loaded to a value of your choice (in this example its 90%, use 1 as your value for 100%) @mixin opacity($opacity) { opacity: $opacity; $opacity-ie: $opacity * 100; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$opacity-ie+")"; filter: alpha(opacity=$opacity-ie); } Usage img.preload{     @include Opacity(0);     &.complete{         Read more [...]
June 4, 2016

SCSS Mixin for Background Cover

SCSS Mixin for Background Cover Read more [...]
May 24, 2015

Golden Oldies: Design Tips That Stand The Test Of Time – Almost

Many sites today, in addition to a liberal sprinkling of graphics in the banner and in the body, have graphic navigation systems. Navigation systems have become more elaborate, as sites have evolved from 6-page brochure-like entities to full-fledged multimedia sites with multiple web applications. Coinciding with the shift in online content is a shift in the metaphor used for designing web graphics. Less and less do we see ourselves designing “pages”; instead, we now find ourselves designing Read more [...]
June 23, 2013

Free Valentines CSS Template for Adobe Dreamweaver

I've decided to upload a load of old CSS templates that I created as starting points for Adobe Dreamweaver Site Extensions, the first being a Valentines CSS website template, complete with layout PSD (Photoshop files), HTML and CSS. All free and provided 'as is', so enjoy Free Valentines CSS Template with Source Files                     Source Files HTML Files / CSS / Images Photoshop PSD Source Files Read more [...]