<data:blog.pageTitle/> 000- Pode mudar as fontes, cores, espaçamentos, enfim, pode mudar este layout base COMPLETAMENTE, eu só montei para ser fácil a todas as pessoas criarem os seus próprios layouts e compreenderem o que estão a fazer, com muitas explicações para o caso de serem principiantes em html ou não reconhecerem algum dos códigos. Boa sorte e divirta-se! 1- onde diz "border-radius", são os cantos arredondados, retire a linha se não quiser ou marque como 0, e aumente o valor dos px se quiser. À frente verá como. Quando tem 4 vezes, por exemplo, "1px 1px 1px 1px", o primeiro é para o canto superior esquerdo, depois canto superior direito, canto inferior direito, canto inferir esquerdo. Rotação para a direita, viu? 2- Pode retirar todas as linhas que dizem "outline", são o tracejado interior em imagens ou caixinhas, bordas internas 3- Se em alguma linha estiver escrito "none", não retire 4- Onde disser "shadow", é obviamente sombra. Se disser "shadow:inset" é sombra interna, se não tiver "inset", é externa. Coloque os valores de px como 0 se não quiser, repare que eu coloco sempre um seguimento de 3 pixels. "0px 0px 0px". Os dois primeiros definem a direção da sombra (direita ou esquerda, cima ou baixo), trabalhando com valores negativos, o último serve para a esbater, desfocar 5- "padding" é espaçamento interno entre as letras e o limite da caixa. Quando tem 4 pixels seguidos, por exemplo "2px 2px 2px 2px", a ordem é topo direita baixo esquerda. 6- "margin" é o espaçamento externo, entre os limites da caixa ou imagem e o resto, servindo para posicionar ou deslocar a imagem. Quando tem 4 pixels seguidos, a ordem é a mesma que no padding. 7- "border" refere-se a bordas externas, aumente o valor px para aumentar a espessura delas 8- Onde diz "letter-spacing" é o espaçamento entre letras, retire a linha se não quiser ou aumente o valor se quiser espaçar mais 9- Se quiser a fonte de algo em maiúsculas pequenas, adicione na área apropriada a linha "font-variant: small-caps;" 10- Saiba colocar o menu no gadget: http://chuvadehtml.blogspot.pt/2014/10/menu-ganhando-vida.html ----------------------------------------------- */ /*----Área desconhecida----*/ /* Variable definitions ==================== */ /*----Fundo, corpo e cabeçalho----*/ body, html { height: 0px; /*troque pela altura de um possível cabeçalho com largura total*/ margin: 0px; padding: 0px; } body { font: $(body.font); color: $(body.text.color); -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } html { background: url(http://4.bp.blogspot.com/-5MpSPqjuakk/VfV43iMPRzI/AAAAAAAAjuA/4o6216vsKv8/s1600/fundo1.png) repeat; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .header-inner .Header .titlewrapper, .header-inner .Header .descriptionwrapper { padding-left: 10px; padding-right: 10px; } .Header h1 { /*título do blog */ font-family: Fredericka The Great; font-size: 50px; color: #5e5e5e; text-shadow: 1px 1px 0px #fff; } .Header h1 a { /*título do blog */ font-family: Fredericka The Great; font-size: 50px; color: #5e5e5e; text-shadow: 1px 1px 0px #fff; } .Header .description { /*quem usa descrições hoje em dia? */ font-size: 130%; } #header-inner { /*serve para mover/alinhar o cabeçalho como imagem*/ margin-top: -45px; margin-bottom: -30px; margin-right: 0px; margin-left: -160px; } html body .region-inner { min-width: 0; max-width: 100%; width: auto; } #navbar-iframe { display: none !important; } body .navbar { height:0px; } .content-outer .content-cap-top { height: $(content.imageBorder.top.space); background: transparent $(content.imageBorder.top) repeat-x scroll top center; } .content-outer { margin: 0px auto; padding-top: $(content.margin); } .content-inner { /*sinceramente, esta área não faz diferença nenhuma :/ ...*/ background: $(content.background); background-position: left -$(content.imageBorder.top.space); background-color: $(content.background.color); padding: $(content.padding); } .main-inner { /*área que ficaria por trás da side e das postagens */ padding: $(content.padding) 0px; margin-bottom: -100px; margin-right: 100px; margin-left: -100px; background: transparent; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } body.mobile { background-size: 100% auto; } body.mobile .AdSense { margin: 0 -10px; } .mobile .body-fauxcolumn-outer { background: $(mobile.background.overlay); } .mobile-post-outer a { color: $(post.title.text.color); } .mobile-index-contents { color: $(body.text.color); } .mobile .tabs-inner .PageList .widget-content { background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center; color: $(tabs.selected.text.color); } .mobile .tabs-inner .PageList .widget-content .pagelist-arrow { border-$startSide: 1px solid $(tabs.selected.text.color); } /*----Área de post----*/ h3.post-title { /* título dos posts */ text-align: center; font-family: Muli; font-size: 16px; color: #fff; text-shadow: 0px 0px 0px #98b5b5; letter-spacing: 1px; background: url(http://3.bp.blogspot.com/-xkjTMwcjxr4/VfWM6BORrTI/AAAAAAAAju4/fR7WYASoBH8/s1600/titulo.png) repeat; box-shadow: inset 0px 0px 3px #c1d3d4, 0px 1px 0px #b5c4c4; border-top: 1px solid #edf2f2; border-left: 1px solid #edf2f2; border-radius: 3px 3px 0px 0px; padding: 2px; margin: -10px -10px 0px -10px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } h3.post-title a { /* título dos posts - fonte */ text-align: center; font-family: Muli; font-size: 16px; color: #fff; text-shadow: 0px 0px 0px #98b5b5; letter-spacing: 1px; padding: 2px; margin: -10px -10px 0px -10px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } h3.post-title a:hover { /* título dos posts - ao passar o mouse */ text-decoration: line-through; color: #98b5b5; text-shadow: 0px 0px 2px #fff; letter-spacing: 2px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .post-outer { /* postagens */ font-family: muli; font-size: 13px; color: #6c9ca6; background: #ffffff; padding: 10px; border-radius: 2px 2px 2px 2px; box-shadow: 0px 0px 2px #bcd1d1; margin-bottom: 30px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .post-body { text-align: justify; line-height: 1.4; position: relative; } .post-header { margin: 0px 0px 1em; line-height: 1.5; } .main-inner .column-center-inner { /*área que ficaria por detrás da área de post */ padding: $(content.posts.padding) 0px; background: transparent; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .main-inner .column-center-inner .section { /*fundo do fundo (leu bem) das postagens. Serviria para unir os posts */ margin: 0 $(content.posts.padding); background: transparent; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } /*----Sidebar----*/ h2 { font-family: Muli; font-size: 16px; color: #f0b57a; text-shadow: 0px 0px 0px #8f8f8f; letter-spacing: 1px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .footer-inner .widget h2 { padding-bottom: .5em; } .sidebar .widget h2 { text-align: right; font-family: muli; font-size: 16px; color: #fff; text-shadow: 1px 1px 1px #c1d2db; letter-spacing: 0px; background: url(http://1.bp.blogspot.com/-fKKe52fc3Yo/VfWFiv3GytI/AAAAAAAAjuQ/rNw4D8EiVg4/s1600/side1.png) no-repeat; padding: 5px 10px 5px 5px; margin: -5px -10px 4px -10px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .sidebar .widget h2:hover { letter-spacing: 1px; background: url(http://3.bp.blogspot.com/-LcvUdak8LVg/VfWFitMUKaI/AAAAAAAAjuU/HAvrWucxo3o/s1600/side2.png) no-repeat; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .main-inner .column-right-inner { margin-top: 10px; margin-left: $(content.padding); } .main-inner .fauxcolumn-right-outer .fauxcolumn-inner { /*zona por trás da sidebar direita */ margin-left: $(content.padding); background: transparent; } .main-inner .column-left-inner { margin-top: 10px; margin-left: 35px; margin-right: -15px; } .main-inner .fauxcolumn-left-outer .fauxcolumn-inner { /*zona por trás da sidebar esquerda */ margin-right: $(content.padding); background: transparent; } .main-inner .column-left-inner, .main-inner .column-right-inner { /*"altura" das sides */ padding: 0px 0px; } .sidebar .widget { /*personalização dos gadgets */ font-famiy: muli; font-size: 11ppx; line-height: 1.3; text-align: justify; text-shadow: 1px 1px 1px #f0a76c; background: #f5c99a; color: #fff; padding: 10px; box-shadow: 0px 0px 2px #e1e5e6; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .sidebar .widget:hover { box-shadow: 2px 2px 0px #e1e5e6; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .sidebar .widget:first-child { /*primeiro gadget da sidebar, pode torná-lo diferente dos outros facilmente */ color: #95b9bd; border-radius: 5px; background: #fff; outline-offset: -4px; text-shadow: none; outline: 1px dashed #f0bf7a; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .sidebar .widget:first-child:hover { /*primeiro gadget da sidebar, pode torná-lo diferente dos outros facilmente */ outline: 1px dashed #fab5af; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .sidebar .widget:first-child h2 { background: url(http://3.bp.blogspot.com/-ixS6GbR4__c/VfWgZ9QsTFI/AAAAAAAAjv4/b1GxdOirz-A/s1600/side1.png) no-repeat; color: #f0bf7a; text-align: left; padding: 18px 10px 12px 33px; text-shadow: none; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .sidebar .widget:first-child h2:hover { color: #e88d84; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .sidebar .widget:last-child { /*primeiro gadget da sidebar, pode torná-lo diferente dos outros facilmente */ color: #95b9bd; border-radius: 5px; background: #fff; outline-offset: -6px; text-shadow: none; outline: 1px dashed #f0bf7a; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .sidebar .widget:last-child:hover { /*primeiro gadget da sidebar, pode torná-lo diferente dos outros facilmente */ outline: 1px dashed #fab5af; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .sidebar .widget:last-child h2 { background: url(http://1.bp.blogspot.com/-NJUp74Ma0Xw/VfWgZ2d-5VI/AAAAAAAAjv0/3klUqxr6sWU/s1600/side4.png) no-repeat; color: #fff; text-align: left; padding: 0px 5px 5px 20px; margin-left: -19px; margin-top: 1px; text-shadow: none; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .sidebar .widget:last-child h2:hover { background: url(http://3.bp.blogspot.com/-ZBQcZaLY0PM/VfWgaVlBjUI/AAAAAAAAjwI/KFof77VlpNI/s1600/side4b.png) no-repeat; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } #Followers1 { /*primeiro gadget da sidebar, pode torná-lo diferente dos outros facilmente */ color: #95b9bd; background: #fff; text-shadow: none; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } #Followers1 h2 { background: url(http://2.bp.blogspot.com/-_i2q8nTwMFI/VfWgZ0NSlNI/AAAAAAAAjwA/tMUPIBajBYI/s1600/side2.png) no-repeat; color: #f0bf7a; text-align: center; padding: 22px 5px 5px 5px; margin-top: -30px; margin-bottom: -10px; text-shadow: none; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } #Followers1 h2:hover { color: #e88d84; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .footer-inner { height: 50px; background: #cccccc; } .widget .zippy { color: $(widget.alternate.text.color); } .footer-inner { background: transparent $(footer.background.gradient) repeat scroll top center; } /*----Comentários----*/ #comments {background: transparent;padding: 15px;} #comments .comment-author {padding-top: 1.5em;} #comments h4, #comments .comment-author a, #comments .comment-timestamp a {color: $(post.title.text.color);} #comments .comment-author:first-child {padding-top: 0;border-top: none;} .avatar-image-container {margin: .2em 0 0;} #comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/ color: #76a4b0!important; text-shadow: 1px 1px 1px #ffffff; font-family: Muli; font-size: 22px; text-align: center; margin-bottom: -13px; margin-top: 5px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } #comments h4:hover, #comments .comment-author a:hover, #comments .comment-timestamp a:hover { letter-spacing: 2px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } #comments a { /* fonte em geral*/ color: #bdbdbd; text-align: center; font-family: Fredericka The Great; font-size: 13px; } .comments .comment-thread.inline-thread { /*enquadramento dos comentários de resposta*/ background: transparent; } .comments .continue { /*borda a separar os comentários*/ border-top: 0px solid #cccccc; } #comments { margin-top: 30px; background: url(http://2.bp.blogspot.com/-A0KWD6IvdaQ/VfgxGLRJlaI/AAAAAAAAj0A/KtmylHew7Aw/s1600/flor1.png) repeat #ebebeb; padding: 5px; border-radius: 0px 0px 3px 3px; } .comments .comments-content { margin-bottom: 0px; font-weight: normal; text-align: justify; font-color: #cccccc; } .comments .comment .comment-actions a,.comments .comment .continue a { /*fonte do botão reply*/ display: inline-block; font-family: muli!important; font-size: 10px!important; text-align: center; color: #e38e88!important; text-shadow: 1px 1px 1px #fff; background: rgba(0,0,0,0.03); box-shadow: inset 0px 1px 1px rgba(0,0,0,0.15), 0px 1px 1px rgba(255,255,255,0.35); margin: 6px 10px -5px 10px; padding: 2px 3px 2px 3px; border-bottom: 5px solid #fad8c8; text-decoration: none; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .comments .comment .comment-actions a:hover,.comments .comment .continue a:hover { /*fonte do botão reply em hover*/ letter-spacing: 1px; border-bottom: 5px solid #f5dcba; color: #edad5a!important; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .comments .comments-content .comment-thread ol { list-style-type:none; padding:0px; text-align:none;} .comments .comments-content .inline-thread {padding: 0px;} .comments .comments-content .comment-thread { margin: 8px 0px;} .comments .comments-content .comment-thread:empty { display: none;} .comment-replies{ margin-top: 1em; margin-left: 15px; } .comments .comments-content .comment{ margin-bottom: 0px; padding-bottom: 0px; } .comments .comments-content .comment:first-child{ padding-top: 16px; } .comments .comments-content .comment:last-child{ border-bottom:0px; padding-bottom: 0px; } .comments .comments-content .comment-body{ position: relative; } .comments .comments-content .user{ font-style: normal; font-weight: normal; } .comments .comments-content .user a{ font-weight: normal; text-decoration: none; } .comments .comments-content .datetime a { /*data do comentário*/ font-size: 10px!important; float: right; font-family: muli!important; text-decoration: none; color: #fff!important; text-shadow: 1px 1px 1px #8a8a8a; margin-top: 3px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .comments .comments-content .datetime a:hover { /*data do comentário em hover*/ letter-spacing: 1px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .comment-content { margin: 0px 0px 8px; padding: 0px 5px;} .comments .comment-block { /*caixa do comentário*/ margin-left: 55px; position: relative; background: #ffffff; box-shadow: 0px 0px 5px #7e999e; border-bottom: 5px solid #86b3ba; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .comment-header { /*nome do autor do comentário*/ background: #e8b674; border: 3px solid #fff; outline-offset: -3px; outline: 1px dashed #f5dcba; font-size: 12px; padding: 5px 5px 5px 8px; margin-bottom: 2px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .comment-header:hover { /*nome do autor do comentário*/ background: #f2a399; outline-offset: -6px; outline: 1px dashed #fad8c8; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .comment-header a { /*fonte do nome do autor*/ font-family: muli!important; font-size: 17px!important; color: #fff!important; text-shadow: 1px 1px 1px #e09f4a!important; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .comment-header a:hover { /*fonte do nome do autor*/ text-shadow: 1px 1px 0px #db6f6e!important; color: #fff; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .comments .comments-content .owner-actions {position:absolute;right:0;top:0} .comments .comments-replybox {border:none;height:200px;width:100%} .comments .comment-replybox-thread {margin-top:0} .comments .comment-replybox-single {margin-top:5px;margin-left:48px} .comments .comments-content .loadmore a {display:block;padding:10px 16px;text-align:center} .comments .thread-toggle {cursor:pointer;display:inline-block} .comments .comments-content .loadmore {cursor:pointer;max-height:3em;margin-top:0} .comments .comments-content .loadmore.loaded {max-height:0;opacity:0;overflow:hidden} .comments .thread-chrome.thread-collapsed {display:none} .comments .thread-toggle {display:inline-block} .comments .thread-toggle .thread-arrow { display: inline-block; height: 6px; width: 7px; overflow: visible; margin: 0.4em; padding-right: 4px; } .comments .thread-expanded .thread-arrow{ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC) no-repeat scroll 0 0 transparent; } .avatar-image-container { /*enquadramento do avatar*/ margin: 5px 3px 5px 5px; border-radius: 3px; background: #fad8c8; border: 6px dotted #fff; outline-offset: -3px; outline: 1px solid #86b3ba; max-width: 50px; max-height: 50px; min-height: 50px; min-width: 50px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .comments .avatar-image-container img { /*avatar também*/ max-width: 50px; max-height: 50px; min-height: 50px; min-width: 50px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .avatar-image-container:hover { /*enquadramento do avatar*/ margin: 5px 3px 5px 5px; border-radius: 5px; background: #f5dcba; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .comments .avatar-image-container img:hover { /*avatar também*/ border-radius: 10px; box-shadow: 0px 0px 1px #707070; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } /*----Efeitos e menus----*/ .agenda a { color: #e8a090; background: #fad8c8; width: 43px; overflow: hidden; height: 11px; padding: 4px; float: left; margin: 1px 2px 0px 2px; box-shadow: inset 1px 1px 0px #f7c8b7; text-shadow: 1px 1px 1px #fff; border: solid 1px #fff; display: inline-block; font-family: muli; font-size: 10px; text-transform: uppercase; text-align: center; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius:7px; } .agenda a:hover { background: #fff; box-shadow: inset 1px 1px 0px #f5dcba; border: 1px solid #fff; color: #f2af57; text-shadow: 1px 1px 0px #fff; } .agenda2 a { color: #75b0bd; background: #ccddde; width: 143px; overflow: hidden; height: 11px; padding: 4px; float: center; margin: 1px 2px 0px 2px; box-shadow: inset 1px 1px 0px #9fc0c2; text-shadow: 1px 1px 1px #fff; border: solid 1px #ebebeb; display: inline-block; font-family: muli; font-size: 10px; text-transform: uppercase; text-align:center; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .agenda2 a:hover {color: #75b0bd;} .change { margin: 0px -5px 0px -5px; width: 220px; height: 60px; background: url(http://1.bp.blogspot.com/-oib1qqWd-Ew/Vfg_y4JtEuI/AAAAAAAAj2M/H-X9XAdfjbc/s1600/creditos1.png) no-repeat; -webkit-transition-duration: .60s; } .change:hover { background: url(http://3.bp.blogspot.com/-iZ-Ga5c3V68/Vfg_y8MmGBI/AAAAAAAAj2Q/UbUFBYWfM58/s1600/creditos2.png) no-repeat; -webkit-transition-duration: .60s; } .shine { width: 220px; height: 94px; margin-right: -5px; margin-left: -5px; position: relative; float: left; } .shine2 { width:220px; height: 94px; background-image: url(http://i.minus.com/iuvzYDPlYu8RR.png); position: absolute; background-position: -265px 0; left:0px; top:0px; background-repeat:no-repeat; } .shine2:hover { background-position: 10px 0; -webkit-transition: background-position .9s ease; -moz-transition: background-position .9s ease; -o-transition: background-position .9s ease; transition: background-position .9s ease; } .confused { /*dados da imagem - para fazer afiliados numa só imagem, reduzi a border-bottom e right*/ width: 56px; height: 42px; margin-bottom: -4px; margin-right: -5px; text-align: center; } .confused:hover { /*repetição do primeiro código, mas em hover*/ width: 56px; height: 42px; margin-bottom: -4px; margin-right: -5px; text-align: center; } .efeito img { /*dimensões da imagem*/ width: 56px; height: 42px; -webkit-transition-duration: .45s; } .efeito:hover img { /*imagens em hover - as que não estão com o rato*/ -webkit-transition-duration: .45s; -webkit-transform: rotate(360deg); -webkit-filter: sepia(0.3) hue-rotate(350deg) saturate(1); opacity: 0.50; } .efeito img:hover { /*o que muda ao passar o rato*/ -webkit-transition-duration: .45s; opacity: 1.0; } .dd1{ width:30%; padding: 5px 0 4px 0; margin: 0 0 4px 4px; float: left; height: 17px; text-align: center; font-size: 13px; background: #fad8c8; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .dd1:hover{ background: #f5dcba; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .dd2{ width:30%; padding: 5px 0 4px 0; margin: 0 0 4px 4px; float: left; height: 17px; text-align: center; font-size: 13px; background: url(http://3.bp.blogspot.com/-xkjTMwcjxr4/VfWM6BORrTI/AAAAAAAAju4/fR7WYASoBH8/s1600/titulo.png) no-repeat; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .dd2:hover{ background: url(http://2.bp.blogspot.com/-69TdGd0Ax34/VfWsChUSV9I/AAAAAAAAjwo/muTRor8vzQE/s1600/anjotransparente2.png) #fff; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .flor { -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .flor:hover{ -webkit-transform: rotate(360deg); -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } menu { /*saiba usar o menu aqui: http://chuvadehtml.blogspot.pt/2014/10/menu-ganhando-vida.html */ display: inline-block; width: 45px!important; font-family: muli; font-size: 10px; text-align: center; color: #9c8aa6; text-shadow: 1px 1px 1px #fff; background: rgba(0,0,0,0.03); box-shadow: inset 0px 1px 1px rgba(0,0,0,0.15), 0px 1px 1px rgba(255,255,255,0.35); margin: 0px 1px 1px 0px; padding: 2px 3px 2px 3px; border-bottom: 3px solid #a1a1a1; opacity: 0.6; -webkit-filter: grayscale(100%); -webkit-transition-duration: .60s; -moz-filter: grayscale(100%); -moz-transition-duration: .60s; filter: grayscale(100%); transition-duration: .60s; } menu:hover { opacity: 1; background: #c9c9c9; box-shadow: inset 0px 1px 1px #bfbfbf, 0px 1px 1px #e0e0e0; border-radius: 3px 3px 0px 0px; -webkit-filter: grayscale(0%); -webkit-transition-duration: .60s; -moz-filter: grayscale(0%); -moz-transition-duration: .60s; filter: grayscale(0%); transition-duration: .60s; } .post img { margin-left: -13px; margin-top: -10px; margin-bottom: -10px; border-radius: 2px; opacity: 0.80; outline: solid 6px rgba(255, 255, 255, .5); outline-offset: -6px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .post img:hover { opacity: 1.0; outline: solid 0px rgba(255, 255, 255, .5); outline-offset: 0px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } /*----Ajustes e outras personalizações----*/ markers { background: #f5dcba; color: #ffffff; text-shadow: 1px 1px 1px #f2c78f; font-family: muli; font-size: 9px; padding: 1px 4px 1px 4px; margin-bottom: -2px; border-right: 3px solid #f2c78f; border-left: 3px solid #f2c78f; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } markers:hover { background: #fad8c8; color: #f7b4a1; border-right: 3px solid #f7b4a1; border-left: 3px solid #f7b4a1; text-shadow: 1px 1px 0px #fff; box-shadow: 0px 0px 2px #fff; -webkit-transition: all 0.5s ease-out; } a:link { /*personalização nos links*/ text-decoration: none; color: #f2ada2; text-shadow: 0px 0px 5px #f8f8f8, 2px -2px 3px #f8f8f8, -2px 2px 3px #f8f8f8, 1px 1px 1px #f8f8f8, -1px -1px 1px #f8f8f8; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } a:visited { /*personalização nos links - visitados*/ text-decoration: none; color: #93b6ba; text-shadow: 0px 0px 0px #e6e6e6; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } a:hover { /*personalização nos links - ao passar o mouse*/ color: #edb86d; text-shadow: 1px 1px 1px #e6e6e6; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .main-inner h2.date-header { /*data do post*/ font-family: muli; font-size: 10px!important; color: #e0b16e; text-shadow: 1px 1px 0px #fff; letter-spacing: 0px; text-align: center; padding: 25px 5px 5px 2px; background: url(http://3.bp.blogspot.com/-_wZniigBDco/VfWTUsmbgSI/AAAAAAAAjvI/CQulDbBNKHo/s1600/data.png) no-repeat; float: right; margin: 0px -65px -30px 65px; width: 60px; height: 45px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .main-inner h2.date-header:hover { /*data do post - ao passar o mouse*/ box-shadow: none; color: #eb9c91; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .post-footer-line-1 { /* rodapé das postagens */ background: #fff; padding: 5px; margin: 8px -10px -10px -10px; outline-offset: -5px; outline: 1px dashed #f5cc93; color: #c9887f; text-shadow: none; text-align: center; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .post-footer-line-1:hover { /* rodapé das postagens - ao passar o mouse */ letter-spacing: 1px; color: #d9913f; outline: 1px dashed #ffbcad; text-shadow: 1px 1px 1px #ffbcad; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .post-footer-line-2 { margin-top: 10px; margin-bottom: -30px; text-align: center; color: #b6c6d1; text-shadow: 1px 1px 0px #fff; } #blog-pager { /* mensagens antigas, home, recentes */ font-size: 12px; font-family: muli; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .feed-links { display: none; } #footer-wrapper { /* rodapé do blog */ background: #f5dcba; border-top: 1px dashed #fff; box-shadow: 0px -3px 0px #f2ada2; z-index: 1000; height: 25px; font-family: muli; font-size: 11px; color: #fff; text-shadow: 1px 1px 1px #f2bd77; text-align: center; padding: 5px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .widget ul, .widget #ArchiveList ul.flat { /*marcadores personalizados - modelo do Adolescente Nerd*/ list-style: none; padding: 5px; } .widget ul li, .widget #ArchiveList ul.flat li { text-align: justify; border-bottom: dotted 1px #d5d5d5; margin-right: -32px; margin-left: -32px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .widget ul li:hover { background: #f4f2f4; text-shadow: 1px 1px 0px #fff; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } blockquote { border-radius: 3px; color: #ffffff; text-shadow: 1px 1px 0px #e6a95e; margin-left: -0px; margin-right: -0px; padding: 5px; background: #f2c083; box-shadow: inset 0 0 0 0px #e6a95e; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } blockquote:hover { background: #f5dcba; box-shadow: inset 400px 0 0 0 #fabdaf, inset -400px 0 0 0 #fabdaf; text-shadow: 1px 1px 0px #f59489; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; } .tr-caption { /legenda/ font-size: 10px; background: #fad8c8; color: #fff; text-shadow: 1px 1px 1px #f2b9a0; font-family: muli; text-align: center; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .jump-link { /*leia mais*/ text-align: center; float: right; background: url(http://4.bp.blogspot.com/-2JRxOUzDhbI/VfWIpKZbOQI/AAAAAAAAjuo/2CrtPEprTmo/s1600/more1.png) no-repeat; padding: 0px 2px 3px 2px; margin: -20px -10px 20px 0px; width: 115px; height: 30px; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .jump-link:hover { background: url(http://1.bp.blogspot.com/-NL0yri7SYUQ/VfWIpB47lNI/AAAAAAAAjuk/W4vAesMJLHw/s1600/more2.png) no-repeat; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .jump-link a { text-align: center; color: transparent!important; text-shadow: none; font-family: muli; font-size: 30px; font-weight: normal; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } .jump-link a:hover { text-align: center; color: transparent!important; text-shadow: none; -webkit-transition-duration: .60s; -moz-transition-duration: .60s; -o-transition-duration: .60s; transition-duration: .60s; } ::-moz-selection { /*seleção colorida*/ background: #e4edf2; color: #b8cfdb; text-shadow: 1px 1px 1px #ffffff; } ::selection { /*seleção colorida - coloque o mesmo que em cima!*/ background: #e4edf2; color: #b8cfdb; text-shadow: 1px 1px 1px #ffffff; } ::-webkit-scrollbar-thumb:vertical { /*barra vertical que se move*/ background: #fad8c8; box-shadow: inset 0px 0px 3px #f2b7a0; border-radius: 10px; } ::-webkit-scrollbar { /*barra vertical fixa*/ width: 10px; background: #f5dcba; border-right: 4px solid #fff; } div#qTip { /*tooltip*/ margin: 2px; padding: 4px 8px; display: none; color: #abc6c7; font-family: muli; font-size: 10px; position: absolute; background: #fff; border: 5px solid #ccddde; outline-offset: -5px; outline: 1px dashed #8faeb0; box-shadow: 0px 0px 1px #fff; } b {color: #f2c380; text-decoration: none;} /*Negrito */ b:hover { cursor: help; color: #f7b59e;} i {color: #f7b59e; text-decoration: none;} /* Itálico */ i:hover { cursor: help; color: #f2c380;} u {color: #f2c380; text-decoration: none; border-bottom: 1px dashed #f2c380;} /* Sublinhado */ u:hover {cursor: help; color: #f7b59e; border-bottom: dashed 1px #f7b59e; text-decoration: none; } strike {color: #f7b59e; text-decoration: strike;} /* Tachado */ strike:hover {cursor: help; color: #f2c380; text-decoration: strike;} /*fim da edição*/ ]]>