Emil Lindén

Menu Close

Category: Web

Animated Grid / List View Toggle

See the Pen Animated Grid / List View Toggle Icon by Emil (@emillinden) on CodePen.0

Zelda – Breath of the Wild skin for Google Maps

I made a Zelda – Breath of the Wild skin for google maps.

Check it out!

I made a business name generator

I made a business name generator for lulz.

Might not look great on mobile devices. Maybe I’ll fix that sometime. Or not.

 

Edit: The business name generator is now mobile friendly! :D

The Grid

Eye of the beerholder

We had the honor of redesigning Ahlafors Bryggeriers (a local brewery) web prior to their 20th anniversary this year. UX/design by me, developed in WordPress by Adam.

 

macbook-ahlafors-mockup

 

 

The bottles needed some love as well. Photo and retouch by me.

ahlafors-bryggerier-photo

Lorem Ricksum

Me and Adam made a Rick and Morty ipsum generator.

Lightbox without jQuery or Javascript

I was working with a clients webpage and needed to create a lightbox-similar function and would like to do that without using any jQuery or Javascript. This is the result after about an hour of fiddeling.

The effect is achieved by setting tabindex=”1″ on the wrap-2 div, which means it can be targeted by css:focus. When the div is focused it changes the appearence of the image inside of itself. Clicking anywhere else on the page removes the focus from the div and hence everything returns to normal.

Pros

  • No JS (!)
  • Works in IE9 (!) and almost in IE8
  • Did i mention no JS?

Cons

  • No gallery navigation with arrows (it can be done tho, i just can’t be arsed). Tabbing works tho.
  • Large thumbnails (the thumbnails need to be the full image, which is loaded when the page loads and not when requested by the browser)

This was mainly used as a test to see if it could be done, i wouldn’t recommend using this (at least not this version of it) in production.

See the demo

Code below:

See the Pen mPvQZW by Emil (@emillinden) on CodePen.0

Menu using only css3

Just a css3 menu i made in some spare time.

Since this demo heavily relies on CSS3, make sure you view it using a CSS3 compatible browser. The Webkit browsers (Safari and Chrome) probably display the effect best, I havent tried it out in other browsers.

If you by any means can't view the demo correctly, here's how it should look.

If you by any means can't view the demo correctly, here's how it should look.

If you don’t think it’s to much work please leave a link to your website in the comments below if you’re going to use the code.

[button link=”http://www.emillinden.com/demo/css3menu/” size=”large” target=”new”]Demo[/button]
 
 

Code below:

The HTML


 
 

The CSS

body, ul, li, a {
  margin:0;
  padding:0;
}

body {
  background:#f9f9f9;
  padding:0;
  margin:100px;
}

#menu {
  width:960px;
  height:36px;
  margin:auto;
  box-shadow:0 2px 3px rgba(0,0,0,.15), inset 0 0 0 1px rgba(255,255,255,.3);
  border-radius:8px;
  border:1px solid #c32a72;
  background-image: -webkit-linear-gradient(bottom, #d64d86 0%, #f26fa6 100%);
  overflow:hidden;
}

#menu ul li {
  list-style-type:none;
  display:inline;
}

#menu ul li a {
  color:#FFF;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  text-decoration:none;
  font-family: 'Open Sans', sans-serif;
  font-weight:600;
  font-size:14px;
  padding:7px 20px 8px;
  border-right:1px solid rgba(0,0,0,.1);
  border-left:1px solid rgba(255,255,255,.15);
  float:left;
  margin-top:1px;
}

#menu ul li a.active, #menu ul li a:hover {
  background:-webkit-linear-gradient(bottom, transparent, rgba(0, 0, 0, .4));
  margin-top:0;
  padding-top:8px;
  border-left:1px solid rgba(0,0,0,.1);
	
}

#menu #menuEnd {
  float:left;
  border-left:1px solid rgba(255,255,255,.15);
  height:34px;
  margin:1px 0;
}

#search {
  position:relative;
}

#search form, #search form input#searchField, #search form input#searchButton {
  margin:0;
  padding:0;
}

#search form {
  border:0;
  outline:none;
  border-radius:48px;
  border:1px solid #d64d86;
  background-image: -webkit-linear-gradient(top, #eee 0%, white 100%);
  float:right;
  margin-right:6px;
  margin-top:5px;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.2);
  width:155px;
  height:22px;
}

#search form input#searchField {
  background:transparent;
  border:0;
  outline:none;
  height:100%;
  font-style:italic;
  margin-left:8px;
}

#search form input#searchField:focus {
  color:#555;
  font-style:normal;
}

#search form input#searchButton {
  height:22px;
  width:22px;
  border:0;
  margin-top:4px;
  margin-right:6px;
  position:absolute;
  top:2px;
  right:1px;
  z-index:2;
  background:transparent;
}

#search form input#searchButton:hover {
  opacity:1;
  cursor:pointer;
}


.mag {
  height:16px;
  width:16px;
  position:absolute;
  right:11px;
  top:11px;
  z-index:1;
}

.mag .circle {
  height:6px;
  width:6px;
  border-radius:6px;
  border:2px solid #aaa;
  position:absolute;
}

.mag .shaft {
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg);	
  width:2px;
  height:6px;
  background:#aaa;
  position:absolute;
  top:7px;
  left:9px;
}