Guia para estudar CSS | import Zeh.Design
Vire e meche alguém me pergunta como aprendi CSS. Eu sempre respondo que foi sozinho e a maioria fica me olhando com uma cara de nossa ele é bom. Porém de bom tenho muito pouco, há muito material de qualidade na internet, bastando apenas força de vontade e oportunidade para aplicar seus aprendizados. Esta oportunidade apareceu quando recebi a oferta do meu primeiro emprego, e no tempo ocioso que ficava no escritório me atracava em links para no futuro ser desenvolvedor dos sites que fazia manutenção. Este guia tem como intuito guiar aqueles que desejam estudar CSS e indicar bons links para aqueles que desejam se aprofundar. Atenção: Muitos dos links estão em inglês. Roteiro de Estudos Antes de começarmos qualquer coisa, vamos definir um bom plano de estudo: Cascading Style Sheets por extenso é uma linguagem de estilo usada para construir o layout de uma pagina. Hoje o uso de folhas de estilo na produção de sites é uma pratica comum e podemos ver seu potencial em vários sites. O começo
Making a Pure CSS Featured Image Slider
Demo CSS3 has given us some pretty powerful tools. Not so long ago we had to use JavaScript if we wanted an image slider, but now it isn’t too hard to do it with only CSS. This article will explain how. I have tried to keep this as to the point as possible, so if you want me to clarify anything, feel free to ask. Also, keep in mind that you will need to use browser prefixes where required. The plan Want to see the finished code? Step 1: The markup Let’s get the foundation worked out. Step 2: Basic styling I am using em instead of px to size up this slider. The height and width on the image aren’t strictly required, but they do guarantee that any larger images are resized to fit within the slider. Step 3: Navigating Now that we have the basics sorted, let’s introduce a technique that will allow us to navigate between the slides. Let’s add some form elements to our markup. You may have noticed that I marked the first radio button as checked. Step 4: Finishing touches Tweet this
CSS Grid Layout Module Level 1
Abstract This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. Status of this document This is a public copy of the editors’ draft. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. Table of Contents 1 Introduction and Overview Grid layout contains features targeted at web application authors. 1.1 Background and Motivation The capabilities of grid layout address these problems. 1.2 Adapting Layouts to Available Space In grid layout
CSS grid: isso muda tudo de novo – Loop Infinito
Atenção, se você tem problemas cardíacos, melhor não ler este post, pois seu conteúdo é altamente empolgante e pode ser perigoso principalmente para pessoas hipertensas. Este conteúdo foi abordado em nossa palestra CSS Layout: o ontem, o hoje e o depois, juntamente com o Flexbox, as Exclusions, as Shapes, as Regions, o Box Model e as Tabelas. Não confundir Quando falo de CSS Grid Layout, não estou falando sobre como desenvolver sistemas de grids, tais como o do Bootstrap ou Foundation. CSS Grid Layout é uma novíssima especificação W3C (ainda em andamento) que propõe uma nova maneira de “leiautar” na Web. Quem se lembra? Quem é das antigas lembra que os layouts de páginas eram feitos geralmente com <table>, ou seja, o site inteiro era um grande tabelão, e isso sem contar com as tabelas aninhadas. Algo como o site da BOL em 2000 (olhem o código fonte, eu mesmo achei tabelas aninhadas em 3 níveis). CSS Grid Com as grids CSS será possível definir o nosso espaço em tela em regiões. Crie a grid 1.
transition
The transition property is a shorthand property used to represent up to four transition-related longhand properties: That div will take half a second when the mouse is over it to turn from red to green. Here is a live demonstration of such a transition: You can specify a particular property as we have above, or use a value of "all" to refer to transition properties. In this above example, both background and padding will transition, due to the value “all” specified for the transition-property portion of the shorthand. You may comma separate value sets to do different transitions on different properties: For the most part, the order of the values does not matter -- unless a delay is specified. Some properties cannot be transitioned because they are not animatable properties. By specifying the transition on the element itself, you define the transition to occur in both directions. IE10 (the first stable version of IE to support transition) does not require the -ms- prefix. Related Properties
CSS Transition e CSS Animation
Um guia rápido pra você entender e começar a usar essas duas propriedades do CSS3. Transition. Prazer! “Com CSS3, podemos adicionar um efeito quando o navegador troca de um estilo para outro, sem usar animações em Flash ou JavaScript.” – w3schools Mostrar um feedback ao usuário quando ele passar o mouse sobre um link (:hover) ou quando ele der foco em um campo input (:focus) são boas práticas. Normalmente fazemos isso alterando o valor de uma propriedade CSS no estado :hover ou :focus do elemento. É aí que entra a transition do CSS3. “CSS transitions permite que as mudanças nos valores das propriedades CSS ocorram suavemente sobre uma duração especificada.” – w3c Nesse exemplo, passe o mouse sobre o logo do Tableless abaixo e veja um exemplo da propriedade transition em conjunto com a propriedade transform. Tá legal, entendi. A propriedade transition possui quatro propriedades para você configurar: transition-property*,transition-duration*,transition-timing-functione transition-delay. Suporte
Sass – Um outro método de escrever CSS
Artigos Quando pensamos em produtividade, logo nos perguntamos e pesquisamos como aumentá-la sem grandes impactos. Então, os pré-processadores e frameworks para CSS vem suprir essa necessidade. Com vocês, um pouco de Sass. Se você é um desenvolvedor front-end que está atualmente no mercado, já ouviu/leu palavrinhas como LESS, Foundation e Sass. Quantas vezes você se pegou copiando e colando aquele monte de classes identadas com mais de 15 linhas repetidamente e pensou: podia existir uma maneira mais rápida de fazer isso. Agora eu te digo: tem! Eu conversei com alguns amigos desenvolvedores e fui saber quais dessas novidades têm sido mais usada, e a disputa ficou bastante acirrada entre os pré-processadores preferidos e os frameworks mais utilizados. Basicamente você começa “instalando” ele em sua máquina. Eu uso MAC e escolhi instalar o Sass através do Git. Após clonar o repositório, criei no diretório escolhido um novo arquivo com o nome de “style.scss”. Pronto! Percebeu? Legal né?
CSS3 . Info - All you ever needed to know about CSS3
