Posts with the tag: css

Using Flexbox and text ellipsis together

Another day I was asked to build a table containing a list of files uploaded by the users. Imagine a table similar to the list of files in Finder: The second item of the table is mobile-phone-screenshot-long-fine-name.png, however the column is not big enough to show the complete filename. Instead, we see mobile-phone-sc...g-fine-name.png. In this project, we decided to cut part of the end of the filename and keeping the extension, as shown above:

Creating a website for my Apple Collection

A while ago I started an Apple Collection. After a few laptops and a few iDevices, I decided that I should start collecting info about my iThings. In the beginning, I created a gist containing model, serial number, how did I get the device, minimum/maximum OS, etc.

The list kept going bigger and bigger and the content started looking messy. The natural way to organize my data would be inside a SQL database, with the information distributed in columns. After organizing the information in tables, I would create a graphQL API (the one cool kids use these days) to give me the data needed to populate my UI – probably written in React, compiled with Babel and packed with webpack.

Para agilizar o desenvolvimento do frontend

Uso o Chrome como browser padrão em minha máquina e algumas extensões interessantes para desenvolvedores. Kingsquare HTML Validator: faz validação do seu código usando o Tidy. Se você usa o Safari, não deixe de conhecer o Tidy Validator Secure Shell: um terminal em seu browser – atualmente prefiro o iTerm ligado em um monitor extra e com várias telas divididas. PageSpeed Insights: uma espécie de YSlow do Google. Descobri em um vídeo (slides) do Ilka Grigorik.

Personalizando o scrollbar com WebKit

Personalizar barras de rolagem é algo que vem lá dos tempos do IE 5.5. Naquele tempo, personalizavam-se as cores da barra, criando efeitos na maioria da vezes cafonas. Já faz algum tempo que o WebKit suporta scrollbars personalizadas. Você pode personalizar atributos como borda e background, usando até mesmo imagens para criar barras de rolagens bacanas. Esse artigo mostra alguns pseudo-elementos e pseudo-classes para personalizar sua barra.

CSS para alinhamento vertical

O Bruno Fernandes e eu estávamos no MSN ontem discutindo uma forma de fazer alinhamento vertical, para uma imagem da qual não se sabe a altura. Pensamos em uma POG de usar imagemagick no ruby para dar um resize na imagem e fixar a altura no tamanho da div. Mas não foi preciso nada disso. Via CSS: .product1 {display: table; height: 120px; width:120px; #position: relative; overflow: hidden; background-color:#fff;} .product2 {position: absolute; top: 50%; left: 50%; display: table-cell; vertical-align: middle; text-align:center;} .

Pseudo-seletores são legais

Todo mundo lembra do pseudo-seletor :hover, quando quer fazer um simples efeito rollover em um link. Well, o que pouco sabe é que existe outros dois seletores muito bacanas: o :after e o :before. Veja o exemplos: input:before { content:" ";} a:before { content:">";} a:after { content: " (link externo) "; } a:after { content: " (" attr(href) ")"; } O primeiro exemplo coloca um espaço (entidade ) antes do conteúdo do botão.

Por que webstandards?

O artigo que vem a seguir foi escrito por mim em fevereiro do ano passado, para o projeto ReclamaSite (que nasceu morto). Naquela época, web2.0 não era capa de revista e muita gente ainda tinha desconfiança das vantagens do Tableless.

Hacks para Internet Explorer

Escrever uma página 100% idêntica para vários browsers pode parecer impossível. Mas não é.
Para contornar isso, hacks são usados, para tentar uma aproximação entre browsers.

CSS para preloader de imagem

Pescado do digg: #preloadedImages { width: 0px; height: 0px; display: inline; background-image: url(path/to/image1.png); background-image: url(path/to/image2.png); background-image: url(path/to/image3.png); background-image: url(path/to/image4.png); background-image: url(); } Depois de configurar o CSS, basta chamar uma div, com seu respectivo id.

CSS: Transparências cross-browser

Existem formas distintas para fazer efeitos de transparência, via CSS. Cada browser reconhece um atributo nas folhas de estilo. Vamos lá então: filter:alpha(opacity=25) Para o flamigerado IE. -moz-opacity:.25 Usado no browser Mozilla opacity:.25 Usado no Opera -khtml-opacity:.25 Usado em navegadores com engine KHTML (Safari e Konqueror) Para o Internet Explorer, os valores variam entre 0 a 100. Para os outros browsers, variam entre 0 e 1. [update] O Opera, não sei porque cargas d’água, não suporta transparência;