Gallerie REFORMA @fe-themes - Tumblr Blog

Posts

#PSD 059

Download: [x]

Se usar,for útil e/ou baixar, dê like e credite!

#meus #materiais #psd

#PSD 058

Download: [x]

Se usar,for útil e/ou baixar, dê like e credite!

#meus #materiais #psd

#PSD 057

Download: [x]

Se usar,for útil e/ou baixar, dê like e credite!

#meus #materiais #psd

Menu Plus:

Preview [x]

1 - Cole esse código aqui [x] no seu CSS.

2 - Cole esse código aqui [x] depois de </style>.

Se usar,for útil e/ou baixar, dê like e credite!

#meus #menus #tutos

Efeito - Click and go (Para redes sociais)

Preview [x]

1 - Cole isso no seu CSS:

@import url(http://fonts.googleapis.com/css?family=Kite+One); *{margin:0;padding:0;border:0;vertical-align:baseline;} a[class^='icon-'] , a[class*='icon-']{display: block;font-size: 30px;speak:none;} input[type='checkbox']{display: none;} .badboy{width: 0;height: 0;clear: both;} label{display: block;position: relative;width: 35px;background:#f66;opacity: 0.75;margin-left: -1px;padding: 29px 10px;-webkit-transition: all .25s ease;-moz-transition: all .25s ease;}label:hover{opacity: 1;} .icon-menu{font-size: 2.6rem;} span{display: block;position: absolute;left: 4px;top: 5px;padding: 2px 5px;-webkit-transition: all .25s ease-in-out;-moz-transition: all .25s ease-in-out;} label:hover{background: #f66;} #button-menu:checked ~ label span{-webkit-transform : rotate(90deg);-moz-transform : rotate(90deg);top: 5px;left: 4px;} #button-menu:checked ~ label{opacity: 1;} nav{width: 295px;background: #fff;margin-left: -398px;margin-top:-57px;-webkit-transition : all .25s ease-in-out;-moz-transition : all .25s ease-in-out;} menu{width: 295px;list-style: none;} li{float: left;} a{display: block;padding: 13px 25px;color : #f66;opacity: .28;} #button-menu:checked ~ nav {margin-left: 54px;} li:hover{background: #272822;} li:hover a:after{ visibility: visible;font-size: 30px;} a:hover{opacity: 1;-webkit-transition : all .25s ease-in-out;-moz-transition : all .25s ease-in-out;} a[class*='icon-']:after{display: block;content: '';position: absolute;left: 368px;top: 11px;visibility: hidden;font-family: 'Kite One';} a.icon-twitter:after{content: 'Twitter';} a.icon-facebook:after{content: 'Facebook';} a.icon-gplus:after{content: 'Gplus';} a.icon-gplus:before{content: '\f0d5';} a.icon-dribble:after{content: 'Dribble';left: 337px;padding : 0 30px 0 30px; } a.icon-dribble:before{content: '\f17d';} span:before{content: '\f0c9';}

2 - Cole isso depois de </style>:

NOTA: Adaptado do CSS Deck [x] para disponibilizar no tumblr.

Se usar,for útil e/ou baixar, dê like e credite!

#efeitos #meus #tutos

Menu Movie:

Preview [x]

1 - Cole isso no seu CSS:

ul {text-align: left;display: inline;margin: 0;padding: 15px 4px 17px 0;list-style: none;} ul li {font: bold 12px/18px sans-serif;display: inline-block; position: relative;padding: 5px 5px;background: #fff;cursor: pointer;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s; transition: all 0.2s;} ul li:hover {background: #A52A2A;color: #000} ul li ul {padding: 1;position: absolute;top: 55px;left: 0;width: 100px;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;display: none;opacity: 0;visibility: hidden} ul li ul li { background: #A52A2A; display: block; color: #fff;} ul li ul li:hover { background: #666; ul li:hover ul {display: block;opacity: 1;visibility: visible;}

2 - Cole isso depois de </style>:

<center> <ul><li><a href="LINK"><img src="http://appnotised.com.au/wp-content/themes/twentytwelve/images/tvc.png" /></a> <ul> <li>hover aqui</li> <li>hover aqui</li> </ul> </li> <li><a href="LINK"><img src="http://appnotised.com.au/wp-content/themes/twentytwelve/images/drama.png" /></a> <ul> <li>hover aqui</li> <li>hover aqui</li> </ul> </li> <li><a href="LINK"><img src="http://appnotised.com.au/wp-content/themes/twentytwelve/images/about.png" /></a> <ul> <li>hover aqui</li> <li>hover aqui</li> </ul> </li> <li><a href="LINK"><img src="http://appnotised.com.au/wp-content/themes/twentytwelve/images/links.png" /></a> <ul> <li>hover aqui</li> <li>hover aqui</li> </ul> </li> <li><a href="LINK"><img src="http://appnotised.com.au/wp-content/themes/twentytwelve/images/contact.png" /></a></li> <li><a href="http://fe-themes.tumblr.com"><img src="http://appnotised.com.au/wp-content/themes/twentytwelve/images/login.png" title="(c)"/></a></li> </ul></center>

Se usar,for útil e/ou baixar, dê like e credite!

#tutos #meus #menus

Menu Blue Icons:

Preview [x]

1 - Cole isso no seu CSS:

@import url(http://fonts.googleapis.com/css?family=Cuprum:400,700); body { padding: 0px; margin: 0px; background: #000811; } .mainmenu { color: #ccc; font-size: 16px; font-family: 'Cuprum', Georgia, "Times New Roman", Times, Serif; background: #002244; width: 100%; height: 51px; border: 1px solid #026; border-bottom: 3px solid #012; text-shadow: 0 1px 0 #000;} .mainmenu ul {margin: 0; padding: 0; } .mainmenu li i { position: absolute; margin-left: -35px; margin-top: 6px; color: #012; text-shadow: 0 1px 0 #036;} .mainmenu li { float: left; display: block; padding: 10px 10px 10px 50px; border-right: 1px solid #012; cursor: pointer; min-width: 100px; max-width: 100px; } .mainmenu li:hover { background: #012; } .mainmenu li:hover i {color: #036; text-shadow: 0 1px 0 #000;} .mainmenu li main {font-weight: 700; margin-top: -18px; } .mainmenu li desc { position: relative; float: left; font-size: 11px; color: #888; } .mainmenu li, .mainmenu li i, .mainmenu li main, .mainmenu li desc {-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;-webkit-transition: all 0.8s ease-in-out;} .mainmenu li:hover main { margin-left: 10px; -moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;}mainmenu li:hover desc { margin-left: 30px; -moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;}

2 - Cole isso depois de </style>:

Se usar,for útil e/ou baixar, dê like e credite!

#tutos #meus #menus

Wishlist Rotate Blue:

Preview [x]

1 - Cole isso no seu CSS:

@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans); ol {counter-reset: li;list-style: none;*list-style: decimal;font: 15px 'Merriweather Sans', 'lucida sans', sans-serif;padding: 0;text-shadow: 0 1px 0 rgba(255,255,255,.5);width: 300px;margin: 0 auto;} ol ol {margin-left: 2em;} .rounded-list a {position: relative;display: block;padding: .4em .4em .4em 2em;*padding: .4em;margin: .5em 0;background: #ddd;color: #444;text-decoration: none;border-radius: .3em;transition: all .5s ease-out;} .rounded-list a:hover{background: #eee;} .rounded-list a:hover:before{transform: rotate(360deg);-webkit-transform:rotate(360deg);} .rounded-list a:before{content: counter(li);counter-increment: li;position: absolute; left: -1.3em;top: 50%;margin-top: -1.3em;background: #87ceeb;height: 2em;width: 2em;line-height: 2em;border: .3em solid #fff;text-align: center;font-weight: bold;border-radius: 2em;transition: all .3s ease-out;}

2 - Cole isso no seu HTML:

<ol class="rounded-list"> <li><a href="">Escreva algo aqui</a></li> <li><a href="">Escreva algo aqui</a></li> <li><a href="">Escreva algo aqui</a> <ol> <li><a href="">Escreva algo aqui</a></li> <li><a href="">Escreva algo aqui</a></li> <li><a href="">Escreva algo aqui</a></li> </ol></ol>

NOTA: Adaptado do CSS Deck [x] para disponibilizar no tumblr.

Se usar,for útil e/ou baixar, dê like e credite!

#tutos #meus #whishlist

Wishlist Click:

Preview [x]

1 - Cole isso no seu CSS:

.tasks {margin: 40px auto;width: 240px;background: white;border: 1px solid #cdd3d7;border-radius: 4px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);} .tasks-header {position: relative;line-height: 24px;padding: 7px 15px;color: #5d6b6c;text-shadow: 0 1px rgba(255, 255, 255, 0.7);background: #f0f1f2;border-bottom: 1px solid #d1d1d1;border-radius: 3px 3px 0 0;background-image: -webkit-linear-gradient(top, #f5f7fd, #e6eaec);background-image: -moz-linear-gradient(top, #f5f7fd, #e6eaec);background-image: -o-linear-gradient(top, #f5f7fd, #e6eaec);background-image: linear-gradient(to bottom, #f5f7fd, #e6eaec);-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.03);box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.03);} .tasks-title {line-height: inherit;font-size: 14px;font-weight: bold;color: inherit;} .tasks-lists {position: absolute; top: 50%;right: 10px;margin-top: -11px;padding: 10px 4px;width: 19px;height: 3px;font: 0/0 serif;text-shadow: none;color: transparent;} .tasks-lists:before {content: '';display: block;height: 3px;background: #8c959d;border-radius: 1px;-webkit-box-shadow: 0 6px #8c959d, 0 -6px #8c959d;box-shadow: 0 6px #8c959d, 0 -6px #8c959d;} .tasks-list-item {display: block;line-height: 24px;padding: 12px 15px;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .tasks-list-item + .tasks-list-item {border-top: 1px solid #f0f2f3;} .tasks-list-cb {display: none;} .tasks-list-mark {position: relative;display: inline-block;vertical-align: top;margin-right: 12px;width: 20px;height: 20px;border: 2px solid #c4cbd2;border-radius: 12px;} .tasks-list-mark:before { content: '';display: none;position: absolute;top: 50%;left: 50%;margin: -5px 0 0 -6px;height: 4px;width: 8px;border: solid #39ca74;border-width: 0 0 4px 4px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);} .tasks-list-cb:checked ~ .tasks-list-mark {border-color: #39ca74;} .tasks-list-cb:checked ~ .tasks-list-mark:before {display: block;} .tasks-list-desc {font-weight: bold;color: #8a9a9b;} .tasks-list-cb:checked ~ .tasks-list-desc {color: #34bf6e;text-decoration: line-through;}

2 - Cole isso no seu HTML:

<title>Task List</title> </head> <body> <section class="tasks"> <header class="tasks-header"> <h2 class="tasks-title">Wishlist:</h2> <a href="http://fe-themes.tumblr.com" title="Credits" class="tasks-lists">(c)</a> </header> <fieldset class="tasks-list"> <label class="tasks-list-item"> <input type="checkbox" name="task_1" value="1" class="tasks-list-cb" checked> <span class="tasks-list-mark"></span> <span class="tasks-list-desc">Escreva algo aqui</span> </label> <label class="tasks-list-item"> <input type="checkbox" name="task_2" value="1" class="tasks-list-cb" checked> <span class="tasks-list-mark"></span> <span class="tasks-list-desc">Clique em cima</span> </label> <label class="tasks-list-item"> <input type="checkbox" name="task_3" value="1" class="tasks-list-cb"> <span class="tasks-list-mark"></span> <span class="tasks-list-desc">Se usar, credite!</span> </label> </fieldset> </section>

NOTA: Adaptado do CSS Deck [x] para disponibilizar no tumblr.

Se usar,for útil e/ou baixar, dê like e credite!

#tutos #meus #whishlist

Wishlist Interativa:

Preview [x]

1 - Cole isso no seu CSS:

.box {background: rgba(255,255,255,.6); padding: 5px; font-family: Verdana, Geneva, sans-serif; font-size: 8pt; color: #696969;text-align: justify;margin-bottom: 5px; border-radius: 5px;} <h1>Animated checkboxes using iconfonts</h1> @import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css); @import url(http://fonts.googleapis.com/css?family=Montserrat); {margin: 0; padding: 0;} h1 { font-size: 16px; padding: 15px; text-align: center;} ul { width: 290px; margin: 0 auto; } ul li { list-style-type: none;padding: 10px; } label { position: relative; padding-left: 30px; font-size: 14px; cursor: pointer; } label:before, label:after { font-family: FontAwesome; font-size: 21px; /*absolutely positioned*/ position: absolute; top: 0; left: 0; } <input type="checkbox" name="one" id="one" /> <label for="one">Create checkbox</label> <input type="checkbox" name="two" id="two" /> <label for="two">Assign label</label> <input type="checkbox" name="three" id="three" /> <label for="three">Import iconfont</label> <input type="checkbox" name="four" id="four" /> <label for="four">Iconify label pseudo elements</label> <input type="checkbox" name="five" id="five" /> <label for="five">Animate icon widths</label> <input type="checkbox" name="six" id="six" /> <label for="six">Color the icons</label> max-width: 0; overflow: hidden; opacity: 0.5; transition: all 0.35s; } input[type="checkbox"] { display: none; } input[type="checkbox"]:checked + label:after { max-width: 25px; opacity: 1; } #one+label:before, #one+label:after {color: hsl(0, 45%, 40%);} #two+label:before, #two+label:after {color: hsl(60, 45%, 40%);} #three+label:before, #three+label:after {color: hsl(120, 45%, 40%);} #four+label:before, #four+label:after {color: hsl(180, 45%, 40%);} #five+label:before, #five+label:after {color: hsl(240, 45%, 40%);} #six+label:before, #six+label:after {color: hsl(300, 45%, 40%);}

2 - Cole isso no seu HTML:

<div class="box"> <h1>Wishlist Interativa</h1> <center><ul><li> <input type="checkbox" name="one" id="one" /> <label for="one">Escreva aqui o que quer</label> </li><li> <input type="checkbox" name="two" id="two" /> <label for="two">Escreva aqui o que quer</label></li> <li> <input type="checkbox" name="three" id="three" /> <label for="three">Escreva aqui o que quer</label></li> <li> <input type="checkbox" name="four" id="four" /> <label for="four">Escreva aqui o que quer</label></li><li> <input type="checkbox" name="five" id="five" /> <label for="five">Escreva aqui o que quer</label></li><li> <input type="checkbox" name="six" id="six" /> <label for="six">Escreva aqui o que quer</label></li></ul> </center></div>

Se usar,for útil e/ou baixar, dê like e credite!

#tutos #meus #whishlist