21/06/2018 Development / css

Eu estou fazendo um css animate pra border-image com gradient e minha solucao foi essa!

https://jsfiddle.net/5uoypaoo/27/

22/05/2018 Development / css

<div class="title" title="Meu Sandbox">Meu Sandbox</div>

.title {

  1. position: relative;
  2. border-bottom: solid 1px #DEDEDE;
  3. padding: .3em 0;
  4. font-weight: 400;
  5. color: #3B3B3B;

}

.title:before{

  1. content: attr(title);
  2. overflow: hidden;
  3. border-top: solid 4px rgba(0,0,0,.2);
  4. position: absolute;
  5. top: 100%;
  6. height: 0;
  7. display: inline-block;

}

Essa é uma solucao simples ;-)

Espero que ajude

04/12/2017 Development / css

div {

  font: 70px -apple-system;

  animation-name: 'doughnuts';

  animation-duration: 3s;

  animation-iteration-count: infinite;

  animation-direction: alternate;

}

 

@keyframes doughnuts {

from {

font-variation-settings: "wght" 1;

}

to {

font-variation-settings: "wght" 1.98;

}

}

28/11/2017 Development / css

Se você for pesquisar no google por override boostrap variables vai encontrar uma grande quantidade de pessoas que necessitam fazer essa mudança em seus projetos.

Aqui vai o pulo do gato oficial

Se você esta usando o generator do angular, provavelmente no arquivo index.scss tem essa linha comentada

/**

* If you want to override some bootstrap variables, you have to change values here.
* The list of variables are listed here bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss

*/

aqui você faz o override

/**
* Do not remove the comments below. It's the markers used by wiredep to inject
* sass dependencies when defined in the bower.json of your dependencies
*/
// bower:scss
// endbower

O erro que o pessoal comete é querer mudar direto a variavel 

$brand-primary: #fff // Isso é errado, nao vai funcionar 

Oque tem que fazer é mudar através do MAPA

$gray-100: #f8f9fa;

$gray-600: #868e96;

$gray-800: #343a40;

$red: #dc3545;

$yellow: #ffc107;

$green: #006600; // This is the only variable I wanted to change

$cyan: #17a2b8;

$theme-colors: (

primary: $green,

secondary: $gray-600,

success: $green,

info: $cyan,

warning: $yellow,

danger: $red,

light: $gray-100,

dark: $gray-800

);

Agora funciona!

11/11/2017 Development / css

Eu estava estudando os pseudos-elementos e me surgiu uma dúvida, existe alguma restrição em usá-los em alguns elementos?

A resposta é: SIM! Nos chamados replaced elements

No CSS, um replaced elements é um elemento cuja representação está fora do escopo do CSS. Em outras palavras, estes são objetos externos cuja representação é independente do modelo de formatação CSS, ou seja, não adiantar fazer css pra esses elementos, o CSS vai cagar pra você hehe.
Alguns elemento

  • video
  • iframe
  • img
  • embed

Elementos em casos específicos:

  • canvas
  • audio
  • object
  • applet

Alguns controles de formulário também podem ser elementos substituídos. A especificação HTML diz que um elemento pode ser substituído e os elementos do tipo de imagem devem ser sempre substituídos. Os objetos inseridos usando a propriedade de conteúdo CSS são elementos substituídos anônimos. Eles são "anônimos" porque eles não existem na marcação HTML

Então pra finalizar:

Replaced elements do not have ::before and ::after pseudo-elements

No caso de alterar um input, é comum as pessoas alterarem o label. Veja esse exemplo:

http://jsbin.com/roxem/2/edit?html,css,js,output

Espero que sirva!

07/11/2017 Development / css

Quem esta utilizando input type date no bootstrap 4, percebe que tem 1 pixelzinho a mais que os outros controles.

Para consertar isso,

input::-webkit-datetime-edit-fields-wrapper {
padding: 0
}

Espero que ajude

07/11/2017 Development / css

https://gist.github.com/webtobesocial/aefd6e25064c08e0cc9a

referencia muito boa

06/11/2017 Development / css

Se tem uma coisa que os browsers ainda não fizeram bem feito, é o tal do icone do input type date.

No chrome é uma setinha pra baixo, bem malacabada!!!!

Então pra gente deixar bonitinha, que tal isso!!!!

input[type="date"] {
  position: relative;
}

/* o transparent no color, é que é o jum the cat */
input[type="date"]::-webkit-calendar-picker-indicator {
  color: transparent;
  background: none;
  z-index: 1;
}

input[type="date"]:before {
  color: transparent;
  background: none;
  display: block;
  font-family: 'FontAwesome';
  content: '\f073';
  /* Icone do calendar - FontAwesome */
  width: 15px;
  height: 20px;
  position: absolute;
  right: 8px;
  color: #999;
}

14/09/2017 Development / css

Esse jump the cat, é pra retirar aquele background amarelo horrivel que o chrome coloca, quando tem o autocomplete.

@-webkit-keyframes autofill {
    to {
        color: #fff;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Boa sorte!

30/03/2017 Development / css

Issso aqui é pra ser executado basicamente com after ou before

content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    height: 0;
    width: 0;
    border-color: transparent transparent #ffc819;
    border-style: solid;
    border-width: 0 0 3vw 100vw

É um códigozinho bem de bosta, mas não precisa usar fundo de imagem :-)

position: absolute;
    left: 10px;
    bottom: -10px;
    z-index: -1;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 0 13px 130px;
    border-color: transparent transparent transparent rgba(0,0,0,.2);

Exemplo rapidinho:

https://jsfiddle.net/ug8p0cbo/3/

20/03/2017 Development / css

http://jsfiddle.net/yqq2ogaq/

https://jsfiddle.net/36m7796q/2/

30/01/2017 Development / css

É muito comum ver os caras querendo tirar o background-color de css... Uns tentam usar background-color: none, auto, inherit...

Mas nesse caso, o correto é background-color: transparent;

Espero que sirva

 

23/01/2017 Development / css

Mais 1 certificado :-)

https://cursos.alura.com.br/certificate/75306fdd-af07-4ba2-8c2b-2e70efc4eb32

FlexBix Froggy - 24 acertos :-) = 100%

23/01/2017 Development / css

container:

  • display: flex
  • flex-direction
  • justify-content
  • flex-wrap
  • flex-flow
  • align-items
  • align-content

flex item:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
11/01/2017 Development / css

With Sass

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

$colorTim : #00CC66;
$colorClaro: #B71C1C;
$colorOi : #0D47A1;
$colorVIVO : #FF9900;
$colorNextel : #CC00FF;
$colorCTBC : #00F2FF;
$colorSercontel : #000;

.leaflet-layer.baseRasterLayer.TIM img {
  @include background-opacity($colorTim, 0.2);
}

With Javascript

window.hexToRgbA = function(hex, opacity){
    var c;
    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
        c= hex.substring(1).split('');
        if(c.length== 3){
            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c= '0x'+c.join('');
        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255, opacity].join(',')+')';
    }
    throw new Error('Bad Hex');
};

 

21/12/2016 Development / css

Esse fit-content é bom pra ser usado quando vc quer usar a proporcao exata do min-width e min-height

Vale a pena dar uma estudada nessas propriedades tambem

fillmax-contentmin-content, and fit-content

23/11/2016 Development / css

https://jsfiddle.net/2fgLfbgg/

10/08/2016 Development / css

/* background */
md-tabs > md-tabs-wrapper {
  /*background-color: #f00 !important;*/
}

/* color tab button */
md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) {
  /*color: #fff !important;*/
}

/* color tab button active */
md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {
  color: #fff !important;
}

/* color icon */
md-tabs .md-tab[disabled], md-tabs .md-tab[disabled] md-icon {
/*  color: #000 !important; */
}

/* background border and swipe */
md-tabs md-ink-bar {
  background-color: #00B8D4;
}

11/07/2016 Development / css

https://jsfiddle.net/fxL4zcma/1/

05/07/2016 Development / css

#channels_scroller {
  max-height: 100px;
  overflow-y: scroll;
  background: #ccc
}

#col_channels:hover #channels_scroller::-webkit-scrollbar {
    display: block;
}
#channels_scroller::-webkit-scrollbar {
    position: absolute;
    -webkit-appearance: none;
    width: 8px;
    display: none;
}
#channels_scroller::-webkit-scrollbar-corner {
    background: transparent;
}
#channels_scroller::-webkit-scrollbar-thumb {
    background: #ab9ba9;
    box-shadow: inset 0 -2px,inset 0 -3px,inset 0 2px,inset 0 3px;
    min-height: 36px;
}
#channels_scroller::-webkit-scrollbar-thumb, #channels_scroller::-webkit-scrollbar-track {
    background-clip: padding-box!important;
    border-radius: 3px;
    color: #4d394b;
}

#channels_scroller::-webkit-scrollbar-track {
    background: #3e313c;
    box-shadow: inset 0 -4px 0 0,inset 0 4px 0 0;
}
#channels_scroller::-webkit-scrollbar-thumb, #channels_scroller::-webkit-scrollbar-track {
    background-clip: padding-box!important;
    border-radius: 3px;
    color: #4d394b;
}

 

05/07/2016 Development / css

*::-webkit-scrollbar {
    width: 6px!important;
}
Pseudo ::scrollbar-thumb element
*::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
}
Pseudo ::scrollbar-track element
*::-webkit-scrollbar-track {
    background: rgba(255,255,255,.08);
}

.app-wrapper-main::-webkit-scrollbar-track {
    background-color: #dfdfdf
}

20/06/2016 Development / css

-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3))

Usado para fazer aquele efeitozinho do header do material-design

Cores legais

#3367d6 - header
#2a56c6 - content

17/06/2016 Development / css

nice effect in buttons

sample: btn bootstrap version 2

background: linear-gradient(to bottom, rgb(33, 33, 33), #303030);
box-shadow: 0px 1px 0px rgba(0,0,0,0.1), inset 0px 1px 0px #303030;

15/06/2016 Development / css

Nao posso mais esquecer dessa porrinha!!!

 

.Aligner {
  display: flex;
  align-items: center;
  min-height: 24em;
  justify-content: center;
  }
   
  .Aligner-item {
  flex: 1;
  }
   
  .Aligner-item--top {
  align-self: flex-start;
  }
   
  .Aligner-item--bottom {
  align-self: flex-end;
  }
   
  .Aligner-item--fixed {
  flex: none;
  max-width: 50%;
 

}

<div class="Aligner">
  <div class="Aligner-item Aligner-item--top">…</div>
  <div class="Aligner-item">…</div>
  <div class="Aligner-item Aligner-item--bottom">…</div>
</div>
14/06/2016 Development / css

i did this css to the s4c app

<div class="box pulse animated"></div>

.box {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%
}
.animated {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.8);}
  100% {transform: scale(1); opacity: 0}
}
.pulse {
  animation-name: pulse;
  animation-duration: 1s;
}

07/09/2015 Development / css
1) used * { border-sizing: border-box} 2) text-hide for h1.logo 3) clear-fix for float elements 4) text-overflow for ...text paragraph 5) visible-xs-* in elements alone desktop
19/03/2015 Development / css

This is very nice. You can personalized console.logmessage styles google chrome.

How?

console.log('%cBlue!.', 'color: blue;');

The propertie %c receive style.

Or in Windows XP 

C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

.console-error-level .console-message-text{
    color: red;
}

.console-warning-level .console-message-text {
    color: orange;
}

.console-log-level .console-message-text {
    color:green;
}
18/09/2014 Development / css

Analizando um código do google, me interessei por esse efeitozinho.

<div></div>

div {
background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.2)),to(rgba(0,0,0,0)));
-webkit-mask-box-image: -webkit-gradient(linear,left top,right top,color-stop(0.0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,.8)),color-stop(1.0,rgba(0,0,0,0)));
border-top: 1px solid rgba(0,0,0,0.4);
height: 8px;
opacity: 0;
position: absolute;
width: 100%;
z-index: 300;
top: 69px;
opacity: 1    
}

Uma parada maneira é ir diminuindo a opacidade.

http://jsfiddle.net/yhhf8rqy/

26/08/2014 Development / css

Triangulo Mágico!!!!

Oque é um triangulo mágico? Não tem nada haver com forró, muito menos com aqueles cubos mágicos, trata-se de uma técnica onde é possível mover-se entre os itens de um menu de forma diagonal.

Um exemplo de menu que não funciona:

Exemplo de menu que funciona:

Segue um link com algumas implementações - http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Porém essas implementações foram feitas usando javascript.

Implementei esse menu na nova página do submarino usando apenas css. :-)

Mas vamos ao que interessa.

Segue o link da implementação: - http://codepen.io/anon/pen/Cwnjq

O grande pulo do gato são as transitions:

  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  transition-delay: 0.3s;

e utilizar opacitidade e visibilty.

Agora é só usar a criatividade e fazer um menuzão bolado!

Espero que sirva

 

04/08/2014 Development / css

Como eu sempre preciso dessas paradinhas com setas, fiz um demo rapidinho pra quando eu precisar ja ter um local pra copiar ;-)

http://jsfiddle.net/4m7Q8/

http://jsfiddle.net/4m7Q8/1/

Espero que sirva

22/07/2014 Development / css

Quando se usa display: inline-block o elemento cria uma margem extra, isto porque, inline-block é considerado um texto.

http://jsfiddle.net/sBUhm/

Uma solução bizarra pra esssa porra, é deixar todos os elementos na mesma linha :-(

http://jsfiddle.net/sBUhm/1/

Uma solução menos amigavel, mas um pouco melhor que deixar na mesma linha é deixar um comentario entre os elementos. :-|

http://jsfiddle.net/sBUhm/2/

A solução mais amigavel e indicada é colocar uma elemento PAI em volta dos filhos e usar letter-spacing. ;-)

http://jsfiddle.net/sBUhm/5/

Nesse caso usamos o tamanho negativo em EM, que independente da fonte do browser e do zoom da página, ele vai zerar as margens: 
* Dica do coisa!

Ou usando margin-left negativa. - Luiz Felipe Tartarotti Fialho

http://jsfiddle.net/sBUhm/6/

Espero que sirva

 

20/07/2014 Development / css

Esse lance de ficar calculando fonte size daqui, dali, acho mto perda de tempo. Por isso lancei essa tabelinha.

 

Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%
30/01/2014 Development / css

Entrei no site da estacio e vi essa lista e decidi inspecionar o css. Acabei gostando e alterando algumas coisas para caso um dia eu precise.

Se for util!

http://codepen.io/anon/pen/BgioF

14/01/2014 Development / css

Esse é só um postzinho pra mostrar como eu venho fazendo as minhas extensões de classes em CSS.

http://jsfiddle.net/9B3XM/

 

29/04/2015 Development / css

Segue um exemplo só para colocar em prática mesmo!

http://jsfiddle.net/ScXD3/2/

http://jsfiddle.net/5q5adj17/1/

 

04/12/2013 Development / css

Vai que alguem precise, segue um exemplo rapidinho.

http://jsfiddle.net/bexu4/

26/10/2013 Development / css

Esse códigozinho foi criado para fazer as bordas laterais.

.box-shadow1 {
position: relative;
box-shadow: 12px 0px 15px -15px rgba(0,0,0,0.8);


.box-shadow1:before {
content: "";
position: absolute;
z-index: -1;
box-shadow: -12px 0px 15px -15px rgba(0,0,0,0.8);
top: 10px;
bottom: 10px;
left: 0;
right: 0;

http://jsfiddle.net/uaXuU/

Espero que sirva!

 

01/10/2013 Development / css

Hoje eu comecei a dar uma olhada mais profunda em SASS.

Particularmente eu achei animal a ideia da parte de escrita e compilação. Poder colocar todos os arquivos num mesmo diretório e depois que salvar automaticamente já sair um css compressado, achei do caraleo.

Então, vamos lá:

  1. Instalar o Ruby - http://rubyinstaller.org/downloads/
  2. Depois rode no cmd - gem install sass
  3. Agora você já pode usar o sass.

O ideial é que você sempre crie uma pasta em seu projeto chamada sass e outra css.

Na pasta sass, você coloca todos seus arquivos scss.

Você pode compilar seu arquivo manualmente : sass input.scss output.css ou fazer uma escuta na pasta, e a qualquer alteração de qualquer arquivo, ele compila automaticamente: sass --watch sass:css 

Você ainda pode compactar o css e até mesmo fazer uma compressão do arquivo.

1) sass --watch sass:css --style compact --no-cache
2) sass --watch sass:css --style compressed --no-cache

Uma outra dica é deixar todos os arquivo .scss com o underline no nome

_grid.scss
_buttons.scss
_nav.scss

e um arquivo default.scss e nesse default, você usar os imports

@import "grid";
@import "buttons";
@import "nav";

Quando rodar, o arquivo default vai ser gerado com todos os css agrupados.

Espero que sirva!

 

01/07/2013 Development / css

Hoje comecei a estudar o uso do atributo content do css3. Simplesmente animal. Um bom exemplo disso, é no uso de colocar as aspas duplas em um blockquote.

Vou postar alguns links de referência e uma demo no jsfiddle. Só usar a criatividade.

/* Aspas Duplas curvas cross browser */ 
blockquote:before { content: '\201C'; }
blockquote:after { content: '\201D'; }

  1. http://www.evotech.net/articles/testjsentities.html
  2. http://css-tricks.com/snippets/html/glyphs/
  3. http://www.danillocesar.com.br/4-boas-utilidades-para-o-uso-do-atributo-content-do-css
  4. http://css-tricks.com/css-content/
22/08/2013 Development / css

Recentemente fiz uma prova em uma avaliação profissional e caiu o exercício para fazer uma lista com espaçamento. Na hora o meu exame ficou uma merda e resolvi dar uma estudada e eis o resultado correto.

 

 

  • 1

  • 2

  • 3

 

 

li {
    width: 40%;
    display: inline-block;
    list-style-type: none;
    margin:0;
}
li div{
 margin-right: 5px;
    background: blue;
    min-height: 250px;
}
.area { width: 20% !important; }

li.area div{
    background: red;
}

http://jsfiddle.net/zKUXA/

É muito bom saber que você não sabe tudo! Sempre aprendendo!

Espero que sirva!

 

21/02/2013 Development / css

.elemento {
display:inline-block;
*display:inline; /* IE7 */
zoom:1
}

Espero que ajude!

12/12/2012 Development / css

Agora SIIIIIIM!

<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

width:100%;
padding: 5px;
border:1px solid blue;
}
div input
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
padding: 5px;
width:100%;
border:1px solid red;
}
</style>
</head>
<body>

<div class="container">
<input type="text">
</div>

</body>
</html>

 

05/11/2012 Development / css
Mto foda! http://line25.com/wp-content/uploads/2012/responsive/demo/index.html
27/06/2012 Development / css

É engraçado, mas as vezes você tem o seguinte código.

<div><img></div>

Digamos que essa div tenha um fundo vermelho...A div vai ficar um tequinho maior que a imagem...Não sei por cargas d´aguas, mas fica...

Então para solucionar basta colocar na imagem um style="display: block"

Espero que sirva!

 

10/04/2012 Development / css

Que tal você fazer os botões igual do google, bootstrap, gmail e outros? Maneiro né! Então vamos lá. Lets Gooooo!

Fiz uma página de exemplo - só clicar e conferir.

Espero que sirva

02/04/2012 Development / css

Eu comecei a fazer uma engenharia reversa em cima do css do site globo.com pra estudar e entender como as janelas transparentes eram desenvolvidas.

A primeira coisa que eu descobri, foi que eles utilizam um sprite - http://s.glbimg.com/jo/g1/media/header_g1/img/sprite_menu.png

Depois foi separar e deixar somente a carcaça do box. E o box, é super bem dividido mesmo. Com 4 cantos e uma meiuca.

<div class="window">
 <div class="window-border">
  <div class="menu-top-e"></div>
  <div class="menu-top-d"></div>

  <div class="content-bg">
   <div class="content-bg2">
    <div class="conteudo-subitens">
     Conteúdo da janela
    </div>
   </div>
  </div>
  <div class="menu-footer-e"></div>
  <div class="menu-footer-d"></div>
 </div>
</div>

E por fim, separar apenas o css...

.window{left:50px;position:absolute;top:25px; width: 800px} /* aqui você pode sobeescrever e deixar um width e height automatico */
.window-borders {border:1px solid red }

.menu-top-e,
.menu-footer-e,
.menu-top-d,
.menu-footer-d{background-image:url('sprite_menu.png');background-repeat:no-repeat}

.menu-top-e,
.menu-footer-e{position:absolute;left:0px;height:8px;width:8px;font-size:1px;overflow:hidden}

.menu-footer-d,
.menu-top-d{height:8px;margin-left:8px;font-size:1px;overflow:hidden}

.menu-top-e{top:0px;background-position:left 0px}
.menu-top-d{background-position:right 0}
.menu-footer-e{bottom:0px;background-position:0 -855px}
.menu-footer-d{background-position:right -855px}

.content-bg,
.content-bg2{overflow:hidden;background: url('sprite_menu.png');background-repeat:repeat;width:100%}

.content-bg{background-position:0px -8px}
.content-bg2{background-position:right -8px}
.conteudo-subitens{color:#929292;font-size:15px;padding:15px}

Só pra não perder o costume, fiz uma firulinha de leve!!!

Tae - olha o resultado - http://www.felipehuggler.com/felipehuggler/testes/janelaglobocom/

Espero que sirva!

 

19/03/2012 Development / css

Hack compativel com todos esses browsers! Lembrando, use realmente somente quando necessário ;-)

@media screen and (-webkit-min-device-pixel-ratio:0){
p { margin: 8px; border: 1px solid red }
}

 

 

16/03/2012 Development / css

Essas paradas de incompatilidade de browser é foda. Comecei a refazer todo o meu sistema de gerenciamente de laudos e uma parte que eu estou mexendo agora é na construção dinamica dos grids.

Ocorre que pra deixar o grid com as colunas todas marcadas e tal, estou usando o css clássico td { border-right: 1px solid red }...blz

A ultima coluna eu não quero que fique marcada...então td:last-child { border: none }...shooooooooow ;-)

E no IE8 my friend ? Ae que esta, essa sintaxe do last-child é CSS3, ou seja, IE8 caga molinho! Mais mole que coco de passarinho.

Então vamos fazer uma coisa pra amenizar pelo menos IE6 e IE7, Se é que alguem usa isso ainda. Vamos fazer um hack!

.datagrid td { h: expression(this.nextSibling==null ? this.style.borderRight = 'none' : '');  /* IE6 || IE7 */ }

Nesse caso, temos que habilitar o modo de compatibilidade

<!--[if IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
 <![endif]-->

E rezar pra funcionar, rs!!!!

Espero que sirva ;-)

 

 

17/11/2011 Development / css

É esse códigozinho!!!! Espero que sirva

::-webkit-scrollbar{width:10px;height:3px;}::-webkit-scrollbar-button:start:decrement::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;}::-webkit-scrollbar-track-piece{background-color:#fff;-webkit-border-radius:0;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;}::-webkit-scrollbar-thumb:vertical{height:100px; background-color:#000000;-webkit-border-radius:px;}::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#000000;-webkit-border-radius:px;}

Funciona no Safari e Chrome

 

27/09/2011 Development / css

#teste {
color: #CCC; /* outros cinza */
color /*\**/: #C00\9; /* hack para o ie 8 vermelho, não pode tirar o \9 do final */
*color: #03C; /* hack para o ie 7 azul */
_color: #3C0; /* hack para o ie 6 verde */
width: 100px;
height: 100px;
}
Apenas ( _color: #3C0; /* hack para o ie 6 verde */ ) com esse harck o IE8, e IE7 reconhece.

Se der erro, colocar os hacks na ordem crescente (ie6, 7, 8)!!! Espero que sirva!

 

08/11/2010 Development / css

Fiz essa classe genérica, que serve tanto para menu na horizontal quanto vertical. Espero que sirva!

.dropdown                 {clear: left;}
.dropdown > ul            {padding: 7px 0;overflow: hidden;z-index: 100;}
.dropdown ul li           {display: inline;float: left;white-space: nowrap;}
.dropdown ul li a         {display: block;float: left;padding: 3px 5px;font-size: 8.5pt;color: blue;margin-right: 2px;height: 14px;text-decoration: none;}
.dropdown ul li ul        {display: none;z-index: 101;position:absolute;min-width: 120px;background: #fff;border: 1px solid #CCC;margin-top: 20px;padding: 2px;}
.dropdown ul li ul li     {display: block;float: none;}
.dropdown ul li ul li a   {float: none;margin: 0;padding: 5px;#width: 120px;height: auto;}
.dropdown ul li ul li ul  {margin: -27px 0 0 121px;}

<DIV class=dropdown><BR>
<UL><BR>
<LI><A href="#">ATENDIMENTO</A><BR>
<UL><BR>
<LI><A href="#">CADASTRO</A><BR>
<LI><A href="#">GERAR REGISTRO</A><BR>
<LI><A href="#">GERAR CARTÃO</A><BR>
<LI><A href="#">ENCAMINHAMENTOS</A><BR>
<LI><A href="#">ESTATÍSTICA DE CADASTRO</A><BR>
<LI><A href="#">ESTATÍSTICA DE ATENDIMENTO</A><BR></LI></UL><BR><BR>
<LI><A href="#">FATURAMENTO</A><BR>
<UL><BR>
<LI><A href="#">RELATÓRIOS</A><BR>
<LI><A href="#">LISTAGEM DE ATENDIMENTO</A><BR>
<LI><A href="#">PROCEDIMENTOS</A><BR>
<LI><A href="#">ESPECIALIDADES</A><BR>
<LI><A href="#">PROGRAMAS</A><BR>
<LI><A href="#">DIÁRIOS BAMS</A><BR>
<LI><A href="#">ESTATÍSTICA</A><BR></LI></UL><BR><BR></LI></UL><BR></DIV>

 $(document).ready(function(){
  $('.dropdown li').hover(
   function() { $('> ul', this).css('display', 'block'); },
   function() { $('> ul', this).css('display', 'none'); });
 });