Blog

Use Shorthand CSS To Make Your Pages Load Faster

Hey guys! Quick tip here for making your websites load faster when using CSS! While this tip won’t make or break your website’s load time, it will definitely help. We all know that every millisecond counts too when considering trying to get ranked higher in the search engines.

Here’s the tip. By using shorthand CSS and combining code into one line, you can reduce the time it takes to load the CSS file, thereby making your entire page load faster. For example, instead of having this:

.head {

background-color: white;

background-image: url(image.png);

background-repeat: no-repeat;

background-position: top-left;

}

You can replace it simply with a one liner like this:

.head {

background: #fff url(image.png) no-repeat top left;

}

Boom! Same result, but way less code.

Hope this helps someone out there!

How To Click Flip An Image Using Only CSS and jquery.

Hey guys! Been a while but I wanted to share a quick tip I use on another website of mine to easily allow visitors to click an image and flip it horizontally. There are tons of reasons why someone might want to do this, and you’d probably think it is complicated to do. However, it’s actually a very easy method using only css code.

In your css, you’ll want a class called “flipped”, which contains the following code:

.flipped {
transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-khtml-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
}

Next, for any image you want users to have the ability to “click-flip” you’ll want to add the following to the image tag:

onclick=”$(this).toggleClass(‘flipped’);”

Here it is in action (click the image!):

Hope you guys find this useful! (if it doesn’t work here, that’s because my wordpress installation is having trouble importing jquery!)

The Best Free Worpdress Portfolio Themes of 2017

If you’re designing a website for an artist, photographer, carpenter, etc then chances are that they are going to want to put their work on display in some sort of portfolio. What better way to accomplish this than to grab a WordPress portfolio theme built for doing exactly that? Back in the old days you would have had to have extensive knowledge in both web design and programming to build out a portfolio website. Now it’s as easy as point and click! But let’s not tell our clients that, right?

The best part about WordPress is the fact that it is open source. This allows us to build off of it and share themes with ease. There is a huge and amazing community built around WordPress and many developers out where who have been creating both paid and free items for it. To build a great website these days you really just need to worry about where to host it. The rest is about configuring templates and basically living the point and click life.

Once you have hosting and WordPress installed, the next step is to upload your theme. Themes are stored in the wp-content/themes directory on your site. Once uploaded you can activate the theme within your admin panel. Once activated, most themes have their own configuration panel where you can enter theme-specific options for configuration.

We’ve compiled a list of over 20 of the best free WordPress portfolio themes available in 2017. Take some time to go through this infographic and see which one you like. At the bottom, under the image, you’ll find a list of raw links pointing to where you can grab these themes absolutely for free!

Download Links:

https://alienwp.com/themes/hatch/

https://themefurnace.com/stacker-lite-theme/

https://themefurnace.com/gridster-lite-theme/

https://photonify.com/downloads/vertex-free-portfolio-wordpress-theme/ref/6/

https://photonify.com/downloads/photo-grid-free-responsive-wordpress-theme/ref/6/

https://dessign.net/free-masonry-theme-responsive/

https://dessign.net/gridly-responsive-theme-free/

https://dessign.net/creative-portfolio-theme-responsive-free/

https://dessign.net/gallery-theme-responsive-free/

https://wordpress.org/themes/simple-perle/

https://wordpress.org/themes/wp-portfolio/

https://wordpress.org/themes/pixgraphy/

https://wordpress.org/themes/munsa-lite/

https://wordpress.org/themes/orvis/

https://wordpress.org/themes/hitchcock/

https://wordpress.org/themes/tography-lite/

https://wordpress.org/themes/gk-portfolio/

https://wordpress.org/themes/pinnacle/

https://wordpress.org/themes/kouki/

https://wordpress.org/themes/illustratr/

https://wordpress.org/themes/espied/

https://wordpress.org/themes/sketch/

Good luck and enjoy!

25+ Of The Hottest Free Sans Serif Fonts Right Now

As a designer working on a contemporary design in 2017, you know how important it can be to choose the right typeface for the job at hand. Most of the time when looking at modern designs, you’re going to want to use some sort of Sans Serif look to show that clean and professional touch. Serifs go by their name due to the small lines they create at the end of their characters. This can be easily noted in fonts like Times New Roman. Sans means “without”. So Sans Serif simply means that it is a font that does not have those strokes on the characters. Helvetica and Arial are two big examples of popular Sans Serif fonts.

Typically Sans Serif fonts are used around the web as go-to fonts for headlines whether <H1> through <h4> tags. You don’t typically see these style fonts as the body content font.

For those designers out there who are looking for a good Sans Serif font but don’t want to use the same old Arial or Helvetica fonts, I’ve compiled a list and graphic of over 25 of the best free sans serif fonts on the internet right now. Peep through the graphic, and then you’ll find the download links at the end of this post. Good luck, fellow designer friends!

Hopefully you found a font you’d like within that info graphic. Please check out the download links here:

https://www.behance.net/gallery/3160420/Homizio

https://www.behance.net/gallery/28703177/Alcubierre-Free-Typeface

https://www.behance.net/gallery/10231891/Dense-typeface

https://www.behance.net/gallery/14209843/SIMPLIFICA-Typeface-Free

https://www.behance.net/gallery/27499203/Stellar

https://www.behance.net/gallery/32728101/Qanelas-Soft-Typeface

https://www.behance.net/gallery/28755151/BAVRO-FREE-FONT

https://www.behance.net/gallery/15574861/Moderne-Sans-Free-Typeface

https://fonts.google.com/specimen/Noto+Sans

http://font.ubuntu.com/

https://01.org/clear-sans/downloads

https://fonts.google.com/specimen/Source+Sans+Pro

https://fonts.google.com/specimen/Pacifico

https://www.behance.net/gallery/32938133/Audrey-FREE-FONT

http://www.fontfabric.com/signika-font/

http://www.fontspace.com/herofonts/above-demo

https://fonts.google.com/specimen/Titillium+Web

https://www.theleagueofmoveabletype.com/league-gothic

http://omnibus-type.com/fonts/chivo.php

http://www.fontspace.com/julieta-ulanovsky/montserrat

http://www.fontspace.com/herofonts/primetime

http://www.fontspace.com/%C3%A1lvaro-thom%C3%A1z/regencie

https://www.behance.net/gallery/26829249/FREE-QONTRA-Font

http://www.fontspace.com/nimavisual/trench

http://aajohan.deviantart.com/art/Comfortaa-font-105395949

https://www.behance.net/gallery/30125991/Arcadia-Typeface-(Free-Editable)

https://www.behance.net/gallery/8668939/Mohave-Typefaces

https://hanken.co/product/hk-grotesk/

 

Good luck friends!