Arquivo

Archive for the ‘CSS’ Category

ASP.net – Aplicar estilos na paginação

Para que a página fique mais intuitiva ( e mais bonitinha também ) é interessante que apliquemos estilos CSS a paginação.

É bem simples fazer isso para componentes como o Grid View.

Para isso, primeiramente adicione o seguinte código ao seu CSS:

.GridPager a, .GridPager span
{
display: block;
height: 20px;
width: 18px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.GridPager a
{
background-color: #f5f5f5;
color: #969696;
border: 1px solid #969696;
}
.GridPager span
{
background-color: orange;
color: #000;
border: 1px solid orangered;
}

Após isso no item Pager Style de sua Gridview, no parâmetro CssClass insira GridPager.

O resultado será esse:

pagerStyle

 

Basta fazer pequenas alterações no seu CSS para ficar com a cor e o estilo que você quiser.

Divirta-se e inspire-se!!

Anúncios
Categorias:.NET, CSS Tags:,

Design Responsivo com o Flexbox


O CSS Flexible Box Layout Module, carinhosamente chamado de Flexbox permite um controle total no posicionamento dos elementos filho de um box vertical ou horizontal.

Além disso, podemos ainda controlar o seu espaçamento.

Logicamente que não é apenas isso, mas também podemos definir orientações para os elementos, alinhamento, etc.

Com certeza é uma mão na roda, e vale a pena realizar alguns testes para quem sabe facilitar o posicionamento dos elementos no seu design responsivo sem muita dor de cabeça.

Ele pode ser acessado neste link: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

Tem uma excelente documentação, exemplos e explicações.

O Flexbox ainda está em fase inicial, é um trabalho em andamento. Se você acessar o caniuse.com e buscar pelo Flexbox notará que com os prefixos do fabricante é possível utilizar o Flexbox.

Mas eu vou testar no meu próximo layout e você?

Divirta-se e inspire-se.

Categorias:CSS, WEB Design Tags:,

CSS – Os benefícios do uso de grids

setembro 15, 2011 Deixe um comentário

Quanto custa um minuto do seu tempo? Uma hora? Uma semana?

O bem mais precioso que temos é nosso tempo e temos que saber o que fazer com o pouco que nos resta, ou “fabricar” tempo.

Pois muitos de nós já perdemos muitas horas elaborando um layout de colunas em CSS, com floats que funcionam em todos os browsers, margens adequadas e mais um monte de coisas e algumas “gambiarras” para que o layout funcione perfeitamente em todos os browsers, pois cada browser interpreta como quer páginas da web.

Ganhe rapidez e organização usando grids em CSS. Chega de perder tempo se temos sistemas fantásticos de grids que deixam tudo praticamente pronto e adaptado.

Destaco um deles. o 960 Grid System.

Note como funciona na figura abaixo:

O espaço em branco é o espaçamento, e você vê as divs configuradas.

O 960 Grid System cria um documento com as definições, chamado 960.css.

Ao definir uma grid, você define na class o tamanho da grid e onde ela ficará posicionada.

Ex: <div class=”grid_1″>

Neste caso a div irá ocupar 1 dos quadrinhos da figura. Mas se você quiser posicionar a grid de maneira diferente, pode usar as definições prefix e sufix para definir quantos quadros antes e quantos quadros depois da div que estamos posicionando. Vamos supor que queremos posicionar nossa div da terceira coluna em diante ocupando 1 coluna do nosso grid com 24 colunas. Então nosso código ficaria assim:

Ex: <div class=”grid_1 prefix_2 sufix_21″>

Ou seja, a grid ocupará 1 coluna, com 2 colunas antes e 21 colunas depois, fechando as 24 colunas do grid.

O 960 Grid System tem também opções de adaptive layout, que se adapta de monitores com mais de 2000 pixels de largura até IPads utilizando um CSS para cada resolução e também tem a opção de layout fluído, utilizando o mesmo sistema de grid escolhido.

Possui um Custom CSS Generator onde podemos definir a largura das margens, quantas colunas queremos e qual a largura de cada colna ou a largura total do layout.

Poupe tempo, energia e dores de cabeça usando o 960 Grid System que seu layout ficará organizado e extremamente profissional.

Divirta-se e inspire-se.

Categorias:CSS, Ferramentas Tags:

@font-face – Use a fonte que quiser em seu site

A web muda a cada minuto, e você não pode nem deve ficar parado. Todos temos de acompanhar sua evolução, por mais rápida que seja.

Pois em minha modesta opinião, a maior revolução que tivemos em termos de web design nos últimos tempos foi o uso de fontes diferentes das consideradas padrões.

Era terrível depender de verdana, georgia, arial e afins. Por maior que fosse nosso esforço, isso era uma tremenda limitação.

Pois há pouco tempo surgiu a API da Google Fonts para nos possibilitar o uso de fontes excelentes. Depois vieram sites como o Cufon que cria um .js com as coordenadas das letras, possibilitando o uso da fonte escolhida.

Mas agora com o CSS3 e suas revoluções temos a poderosa tag @font-face.

Com ela podemos usar a fonte que bem entendermos apenas utilizando uma referencia.

Note como é simples o seu uso. Primeiramente, usamos a seguinte configuração na tag @font-face para fazer a referencia a fonte escolhida:

@font-face {
    font-family: DeliciousRoman;
    src: url('Delicious-Roman.otf');
}

Depois disso, para utilizar a fonte nos parágrafos por exemplo, é simples assim:

p {
	font:36px DeliciousRoman;
}

Sim, fácil como qualquer outra fonte.

Como eu queria poder recuperar minhas horas de sono pensando em como adaptar uma fonte ruim ao layout. Mas agora, isto é coisa do passado.

Preste atenção na compatibilidade desses malditos browsers que tendem a serem sempre os atrasados na web.  Mas nada que ferramentas excelentes como o FontSquirrel nao resolvam.

As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT. Você pode encontrar qualquer conversor online que esse problema é resolvido. Você pode converter suas fonts para EOT diretamente no Font Squirrel. O Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF.

Tome certos cuidados na utilização das fontes, pois você está publicando em seu FTP e qualquer um pode fazer o download. Temos zilhões de fontes gratuitas, mas caso esteja utilizando uma fonte paga, pense em outras maneiras de utilizar.

Cada vez mais na web o limite é a imaginação de cada um, pois temos a cada dia um mar de novas possibilidade.

Divirta-se e inspire-se.

Design Responsivo – Tabelas – Tutoriais e Exemplos

julho 28, 2011 2 comentários

Identifique abaixo qual das 2 tabelas adaptadas para o IPhone está errada:

Acertou quem respondeu: AS DUAS.

Sim , nenhuma delas serve para uma tabela adaptada ao IPhone.

A da esquerda está com as fontes visiveis, mas de difícil compreensão, afinal o conteúdo ultrapassou a largura determinada.

A da direita só com uma lupa. Ela está adaptada na largura, mas de que adianta? Não dá pra enxergar nada.

Pois o resultado de uma tabela aplicada ao design responsivo seria este:

Lindo não é mesmo? E o melhor de tudo, é uma tabela responsiva, ou seja, usando media queries, não precisamos ficar fazendo gambiarras com o objetivo de adaptar para o monitorzão de 1920 x 1080 e para o IPhone do tiozinho.

Segue abaixo um link contendo o tutorial de como fazer esta tabela, e também vários outros exemplos de tabelas e gráficos.

http://css-tricks.com/9096-responsive-data-tables/

E fica a dica, aqui no blog temos tutoriais e bastante conteúdo sobre design responsivo.

Divirta-se e inspire-se.

Categorias:CSS, Tutoriais, WEB Design Tags:,

CSS Reset – Acabando com as diferenças entre browsers

julho 8, 2011 1 comentário

Uma das coisas mais chatas é a diferença da interpretação CSS dos browsers.

Isso já tirou meu bom humor várias vezes.

Até que um dia descobri um código no site meyerweb chamado CSS Reset. Dei uma chance pra ele, e posso dizer que dificilmente depois de começar a utiliza-lo tive maiores problemas com a interpretação do meu CSS.

Antes de todos os seus estilos, inclua o código abaixo que ele vai dar uma padronizada na maneira dos browsers interpretarem seu CSS.

Divirta-se e inspire-se.

<style>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
</style>


Categorias:CSS Tags:

Tutorial – Como trabalhar com design responsivo

julho 5, 2011 5 comentários

O segredo do design responsivo são as media queries. Note neste exemplo: Clique aqui

Para ver funcionando, diminua a largura do seu navegador. Viu?

Não é tão complicado como você imaginava.

O que são as media queries?

Media Queries é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. O browser ou a aplicação lê as expressões definidas na query, caso o dispositivo se encaixe nestas requisições, o CSS será aplicado.

Então vamos lá para um exemplo.

Primeiro passo é definir o viewport para largura. Fica assim:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Depois linkamos as folhas de estilo externas específicas para iphone e ipad:

<!--[if !IE]>--> <link type="text/css" rel="stylesheet" media="only screen and
(max-device-width: 480px)" href="iphone.css" /> <link type="text/css" 
rel="stylesheet" media="only screen and (min-device-width: 768px) 
and (max-device-width: 1024px)" href="ipad.css" /> <!--<![endif]-->

Ou então colocamos os estilos no mesmo arquivo mesmo. Ficaria mais ou menos assim:

 /* target the minimum width of the browser window */ @media screen and 
(min-width: 900px) { .class { background: #FFE11A; } }
/* target the maximum width of the browser window */
 @media screen and (max-width: 600px)
{ }
/* target both the minimum and maximum width of the browser window */
 @media screen and (min-width: 600px) and (max-width: 900px)
{ }
/* target the maximum width of the device */
 @media only screen and (max-device-width: 480px)
{ }
/* target the maximum width of the device and it's orientation */
 @media only screen and (max-device-width: 480px) and (orientation:portrait)
{ }
 @media only screen and (max-device-width: 480px) and (orientation:landscape)
{ }
/* target the iPhone4 retina display */
 @media only screen and (max-device-width: 480px) and
(-webkit-min-device-pixel-ratio: 2)
{ }
}

Compatibilidade com Browsers: As últimas versões do Firefox, Safari, Chrome e Opera já comportam tranquilamente as media queries. O IE9 usará ( em breve ) e o IE8 se consegue com o plugin que você encontra aqui.

Outras fontes de tutoriais e exemplos são os seguintes sites:

mediaqueri.es – Coleções de design responsivos.
Less Framework – Um sistema de grids CSS para websites responsivos.
CSSgrid – Um grid wide de 1140px, com 12 colunas. Ideal para versões mobile.
A Jason Grigsby article – Artigo sobre media queries para mobile.

Divirta-se e inspire-se.

Categorias:CSS, WEB Design Tags:,
%d blogueiros gostam disto: