Showing posts from: SCSS

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 [...]
April 4, 2016

Responsive Landing Page with Marketo Integration

As a very varied part of my day job as a technical marketing consultant, there are many varied tasks that are required of me, to maximise conversions for landing page sign-ups and lead acquisition. To this end we decided to take the baseline landing page for free trial reigstrations and give it a facelift and introduce some interesting conversion increasing features. Here's the original landing page, a straightforward light landing page, with the minimum amount of form fields that were originally Read more [...]