solemone design'art

New Poster: Dreiecke

solemone — Wed, 14 Mar 2012 08:27:34 +0000

New Poster: Tree

solemone — Sun, 19 Feb 2012 12:51:32 +0000

Happy New Year

solemone — Sat, 31 Dec 2011 22:59:49 +0000

Fullsize Background Image with CSS3 background-size

solemone — Tue, 29 Nov 2011 12:25:26 +0000

If you want to create a fullsize background image on your website you can simply use the CSS3 property background-size: cover. But not every Browser supports CSS3 so you need a fallback. Check out this tutorial to learn more.

View Demo & Code

Responsive Web Design: Overflow Image with vertical centering

solemone — Wed, 16 Nov 2011 19:53:30 +0000

If you want to use an image in your responsive web design you can use fluid images. But there is another way. You can set a maximum height and crop the image. If you want to learn more about it, check out the tutorial that I wrote about the overflow image cropping.

View Demo & Code

AMC Pacer Ads

solemone — Tue, 08 Nov 2011 14:08:59 +0000

A few weeks ago I showed you some retro ads of the AMC Gremlin. While searching that ads I came across the AMC Pacer, which I think looks even cooler. The retro futurism design with rounded shape and massive glass area is simply amazing. I think it looks a little bit like the vehicle from the Jetsons.

How to make a responsive Google+ Button with CSS3

solemone — Thu, 03 Nov 2011 22:24:17 +0000

So what the heck is a responsive button? For me it’s a button that fits in your responsive webdesign. In this case it’s proportional scalable. That means if you change your font size it scales automatically all properties like border-size, border-radius and padding proportionally. You can do this by using em’s instead of pixels. For more information check the responsive web design article by Ethan Marcotte. I recommend his book.

Demo with 1em (16px) font size

Google+

Demo with a bigger font size

As you can see all properties are scaled proportionally. I’ve just changed the font size to 4em.

Google+

Source Code

It’s a simple button with CSS3 properties like border-radius, linear-gradient and box-shadow. I used the :before pseudo-element to create the “Google colors”.

Note: I set the font size of the parent element to 16px (default browser font size) and calculated with that. So if you change your default document font size take care of converting your pixels to em’s (required px size / your default font size = px size in em).


.googleplus {
	color: #fff;
	display: inline-block;
	font-family: sans-serif;
	font-size: 1em; /* 16px - parent element has a font size of 16px */
	font-weight: bold;
	text-decoration: none;
	text-shadow: 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, .5); /* 1px / 16px = 0.0625 */
	border-bottom: 0.0625em solid rgba(0, 0, 0, .65);
	border-radius: 0.1875em; /* 3px / 16px = 0.1875 */
	box-shadow: 0 0.0625em 0.125em #000; /* 1px / 16px = 0.0625 && 2px / 16px = 0.125 */
	padding: 0.4375em 1em; /* 7px / 16px = 0.4375 && 16px = 1 */
	position: relative;
	background: #2d2d2d;
	background: -moz-linear-gradient(top, #2d2d2d 0%, #141414 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2d2d), color-stop(100%,#141414));
	background: -webkit-linear-gradient(top, #2d2d2d 0%,#141414 100%);
	background: -o-linear-gradient(top, #2d2d2d 0%,#141414 100%);
	background: -ms-linear-gradient(top, #2d2d2d 0%,#141414 100%);
	background: linear-gradient(top, #2d2d2d 0%,#141414 100%);
}

.googleplus:before {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: 0.1875em; /* 3px / 16px = 0.1875 */
	margin-bottom: 1px;
	border-top: 0.0625em solid rgba(255, 255, 255, .2); /* 1px / 16px = 0.0625 */
	border-top-left-radius: 0.1875em; /* 3px / 16px = 0.1875 */
	border-top-right-radius: 0.1875em; /* 3px / 16px = 0.1875 */
	background: -moz-linear-gradient(left, #E52D39 0%, #E52D39 25%, #168BE6 25%, #168BE6 50%, #2AC700 50%, #2AC700 75%, #FC0 75%, #FC0 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#E52D39), color-stop(25%,#E52D39), color-stop(25%,#168BE6), color-stop(50%,#168BE6), color-stop(50%,#2AC700), color-stop(75%,#2AC700), color-stop(75%,#FC0), color-stop(100%,#FC0));
	background: -webkit-linear-gradient(left, #E52D39 0%,#E52D39 25%,#168BE6 25%,#168BE6 50%,#2AC700 50%,#2AC700 75%,#FC0 75%,#FC0 100%);
	background: -o-linear-gradient(left, #E52D39 0%,#E52D39 25%,#168BE6 25%,#168BE6 50%,#2AC700 50%,#2AC700 75%,#FC0 75%,#FC0 100%);
	background: -ms-linear-gradient(left, #E52D39 0%,#E52D39 25%,#168BE6 25%,#168BE6 50%,#2AC700 50%,#2AC700 75%,#FC0 75%,#FC0 100%);
	background: linear-gradient(left, #E52D39 0%,#E52D39 25%,#168BE6 25%,#168BE6 50%,#2AC700 50%,#2AC700 75%,#FC0 75%,#FC0 100%);
	content: '';
}

Change the colors for your needs and add some :hover and :active state styles. And please let me know what you think.

Festival of Lights Berlin 2011

solemone — Wed, 02 Nov 2011 10:58:31 +0000

Once a year Berlin shines in bright colors. That’s because the Festival of Lights takes place. For those who don’t know it, famous sights turn into light canvas. I’ve made some shots of the Fernsehturm and the Berliner Dom.

Berliner Fernsehturm

Berliner Dom

AMC Gremlin Ads

solemone — Mon, 24 Oct 2011 09:48:36 +0000

When I’m looking for inspiration I always check some retro ads. This time I’ve found some of a classic car the AMC Gremlin.

Grayscale Hover Effect with HTML5 canvas and jquery

solemone — Wed, 19 Oct 2011 09:37:37 +0000

I saw a tutorial on webdesignerwall.com showing how to make a HTML5 Grayscale Image Hover and thought this is very cool. After some research I’ve found another tutorial on Nettuts+ with another function. This one was better for me to understand(video tutorial), so I combined the snippets together and reduced the jQuery code for my needs. Finally I’ve created some different hover effects.

View Demos & Codes

The Future with CSS Shaders and Filter Effects

In the future there will be CSS Shaders to do something like that. For more information check out this article about CSS Filter Effects on Adobe.com.