Tim Kyarie TimothyMwangi

18 Simple Styles for Horizontal Rules (hr CSS Design)

Bootstrap 3 Nav Menu Responsive Brand Logo Image - Dispute Bills

This demo corresponds to a this question answered on stackoverflow about Bootstrap Navbar Logos

There is a bug in Firefox with the bootstrap navbar-brand image. These methods above FIX the firefox issue by applying padding to the image and not the .navbar-brand tag removing the padding on .navbar-brand.

If you're looking for my original post using object fit method I have removed it for now because it is not fully supported in IE without a polyfill or fallback using css tables.

These are all examples of how to use a logo image in the bootstrap nav using tag. Using height on the logo along with width: auto, the image will resize to fit within the navbar and not overflow onto the page. This works exactly the same way .img-responsive does except in reverse. However, there is currently a bug in firefox so we have

BB8 from Starwars ⚾️ – with SVG & GSAP

Droids 🤖

Link: BB8 reference on Youtube

I'm not a blockbuster kind of guy, but I just can't resist when it comes to Starwars. It's such a captivating saga. The divine Force that connects us all, the inner battle against evil, and of course the little companion droids. BB8 is such a well designed character. While recognising some reused features from R2D2's lovable personality, we also so see a reinvented droid with his own quirky style and functionality.

Making a BB8 graphic (SVG) and bringing him to life (GSAP) was my way of getting some quality time and getting to know the little guy.

CSS ONLY Girl Running

Girl drawn and animated using only CSS.

A Pen by TimothyMwangi on CodePen.

License.

CSS3 text-shadow effects

A Pen by TimothyMwangi on CodePen.

License.

-webkit-background-clip:text CSS effect

Use -webkit-background-clip: text and -webkit-fill-text-color : transparent to apply a background to a text on webkit browser.

Set a color fallback for other browser.

Base on this article from Divya Manian : http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html

A Pen by TimothyMwangi on CodePen.

Elastic stroke CSS + SVG

A Pen by yoksel on CodePen.

License.

base64 glitch animation

A demo of the 'img-glitch' module created based on lucas bebber's pen

Forked from Lucas Bebber's Pen base64 glitch animation.

A Pen by Max G J Panas on CodePen.

License.

-webkit-background-clip:text CSS effect

Use -webkit-background-clip: text and -webkit-fill-text-color : transparent to apply a background to a text on webkit browser.

Set a color fallback for other browser.

Base on this article from Divya Manian : http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html

A Pen by Jintos on CodePen.

	<!-- START OF THE FLEX CONTAINER, THE UNORDERED LIST -->
	<ul class="grid-wrap">

	<!-- WP LOOP STARTS HERE -->
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

	<!-- LIST ITEM FOR EACH POST -->
	<li class="grid-item">

	<!-- FEATURED IMAGE FOR THE POST -->