CSS no Lanche - Porque ingerir CSS na hora do lanche não engorda

Sorteio – Livro CSS3

Pedro Rogério — Mon, 05 Dec 2011 13:44:21 +0000

O Maujor, no dia 13 de dezembro, irá lançar seu mais novo livro, dessa vez sobre CSS3. Quer conhecer mais sobre o livro, leia a resenha abaixo:

CSS3 ultrapassou o status de proposta de uma tecnologia que prometia revolucionar a forma como estilizamos documentos para a web e deve obrigatoriamente fazer parte do dia a dia dos designers e desenvolvedores web.

Muitas das funcionalidades das CSS3 estão desenvolvidas o bastante para ser empregadas em fase de produção, quer com suporte nativo, quer com uso de prefixos proprietários. Outras tantas estão sendo implementadas em navegadores modernos, possibilitando o seu estudo e o desenvolvimento de suítes para estudos. Saber o que se pode e o que não se pode, o que se deve e o que não se deve usar das CSS3 é um conhecimento indispensável.

Este livro tem os seguintes objetivos:

- Fornecer uma visão detalhada das CSS, possibilitando aos iniciantes conhecer os mecanismos da aplicação de estilos, sua sintaxe, suas propriedades básicas e os esquemas de posicionamento CSS, bem como estudar e exemplificar valores e unidades CSS.
- Apresentar e exemplificar os novos seletores CSS3.
- Demonstrar as propriedades avançadas para aplicação de fundos com uso das funcionalidades para background.
- Estudar as funcionalidades para aplicação de bordas, sombras, cores e opacidade.
- Apresentar e demonstrar os novos contextos para construção de layout com emprego das funcionalidades previstas nos Módulos Multicolunas, Template Layout e Boxes Flexíveis.
- Estudar o modo de servir folhas de estilos para diferentes tipos de mídia com uso das funcionalidades do Módulo Media Queries.
- Aplicar gradientes, transformações 2D e 3D, transições e animações com uso de CSS3.

Maujor aborda as novas funcionalidades das CSS3 de forma clara, em linguagem didática, mostrando vários exemplos práticos no site do livro (http://livrocss3.com.br).

E como os leitores aqui não poderiam ficar de fora, vou sortear um exemplo no blog. E para participar é fácil, não precisar tweetar esse post para 200 pessoas ou algo do tipo, basta deixar um comentário aqui com um e-mail válido, para que eu possa entrar em contato depois, caso você seja o ganhador. O formulário de comentários ficará aberto por 1 semana, ou seja, até o dia 13 de dezembro, quando será a data de lançamento do livro e também o dia do sorteio.

A ferramenta utilizada para o sorteio será o Random.org. Boa sorte a todos os participantes.

Update: O ganhador do livro foi o Cleyton, meus parabéns.

Sorteio – Livro CSS3

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Vimeo Lightbox Gallery

Pedro Rogério — Mon, 14 Nov 2011 12:43:49 +0000

Em um post anterior, mostrei aqui como era possível criar um lightbox com vídeos do Youtube. Dessa vez, vou mostrar aqui um exemplo com vídeos do Vimeo.

O HTML é muito simples, simplesmente criei uma div com um link dentro, esse mesmo link deve conter o link para o vídeo do Vimeo, como você pode ver abaixo:


	Play

Os thumbnails de cada vídeo são obtidos através da API do Vimeo. O resto fico por conta do JavaScript.

$.fn.center = function (relation) {
	var center_in = (relation) ? $(relation) : $(window);

	this.css("position","absolute");
	this.css("top", ( center_in.height() - this.height() ) / 2+center_in.scrollTop() + "px");
	this.css("left", ( center_in.width() - this.width() ) / 2+center_in.scrollLeft() + "px");
	this.css("z-index", "200");
	return this;
};

function vimeoid(url) {
	var vid = url.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/);
	vid = vid[1];
	return vid;
};

(function(){
	$("a[rel='lightbox']").each(function(){
		var that = this,
		url = $(this).attr('href'),
		id = vimeoid(url),
		thumb = $('');

		$.getJSON('http://www.vimeo.com/api/v2/video/' + id + '.json?callback=?', {format: "json"}, function(data) {
			thumb.attr({
				"src" : data[0].thumbnail_large,
				"alt" : data[0].title,
				"title" : data[0].title
			});
			$(that).append(thumb);
			$(that).append(''+data[0].title+'')
		});
	});

	var $overlay = $('');
	var $lightbox = $('[ fechar ]');
	$("a[rel='lightbox']").click(function(e){
		e.preventDefault();
		var href = $(this).attr('href'),
		id = vimeoid(href);
		$overlay.appendTo('body');
		$lightbox.find('#lightbox-inner').html('');
		$lightbox.appendTo('body').center();
	});

	$('#lightbox a').live('click', function(e){
		e.preventDefault();
		$('#overlay').remove();
		$('#lightbox').remove();
	});
}());

Vimeo Lightbox Gallery

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

‘do a barrel roll’ com CSS3

Pedro Rogério — Tue, 08 Nov 2011 13:17:55 +0000

Você já experimentou procurar no Google por do a barrel roll? Ainda não? Então procure e veja o que acontece, mas pelo menos faça isso com um browser descente né, nesse seu Internet Explorer 6 não será possível ver o efeito.

Traduzindo ao pé da letra, ‘do a barrel roll’ é um termo que significa algo como “Dê uma cambalhota”. A expressão é uma manobra aérea que existe desde os primeiros combates entre aviões na Primeira Guerra Mundial, mas o termo só se tornou popular a partir do jogo Star Fox, do Nintendo 64. A manobra era obtida com um clique duplo nos botões “Z” e “R”. Já o Google querendo prestar então uma homenagem, implementou esse efeito em sua busca. Abaixo você pode ver o CSS responsável por fazer isso:

@-moz-keyframes roll { 100% { -moz-transform: rotate(360deg); } }
@-o-keyframes roll { 100% { -o-transform: rotate(360deg); } }
@-webkit-keyframes roll { 100% { -webkit-transform: rotate(360deg); } }

body.barrel-roll {
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-o-animation-name: roll;
-o-animation-duration: 4s;
-o-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}

E com um pouco de JavaScript, nós podemos fazer o negócio funcionar facilmente:

if(location.href.match('do-a-barrel-roll')){ //Checa se a URL contém o texto do a barrel roll
    setTimeout("document.getElementsByTagName('body')[0].className='barrel-roll';", 3000);
}

Vi aqui e aqui.

‘do a barrel roll’ com CSS3

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Simple Thumbnail Carousel

Pedro Rogério — Thu, 03 Nov 2011 12:25:36 +0000

Carousel desenvolvido com a utilização de jQuery e o plugin jQuery carousel desenvolvido por Richard Scarrott.

Simple Thumbnail Carousel

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Ajax RSS Widget

Pedro Rogério — Thu, 27 Oct 2011 13:08:18 +0000

Já demonstrei em meu outro blog anteriormente como é possível fazer a leitura de feeds de outros site com a Google JSAPI, tudo bem, dessa vez acabei implementando um Widget, que você pode utilizar em qualquer site.

O HTML é extremamente simples como você pode ver abaixo:

E depois, com a utilização de jQuery, eu monto meu widget:

var Feed = {
	widget: function(url, callback) {
		$.ajax({
			url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url),
			dataType: 'json',
			success: function(data) {
				Feed.callback(data.responseData.feed);
			}
		});
	},
	callback: function(feed) {
		var entries = feed.entries;
		for (var i = 0; i < entries.length; i+=1) {
			$('#updates').append('' + entries[i].title + '<\/a><\/li>');
		}
		$('#updates').append('
Veja mais<\/a><\/li>');
	}
};

Feed.widget('http://feeds2.feedburner.com/pinceladasdaweb'); //RSS do site aqui

Ajax RSS Widget

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Fancy Image Carousel

Pedro Rogério — Sat, 22 Oct 2011 15:26:05 +0000

Baseado no PSD que acabei encontrando aqui e no tutorial sobre aplicar estilos em imagens com CSS3 do site Web Designer Wall, criei um carousel para ilustrar um pouco essas técnicas.

Mas atenção, devido a utilização de código de última geração, esse carousel pode não funcionar corretamente em browsers obsoletos como o Internet Explorer.

Fancy Image Carousel

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Animated Login Form

Pedro Rogério — Mon, 03 Oct 2011 13:16:38 +0000

Quer implementar um formulário de login animado no seu site? Deixo aqui um exemplo que vi no site Forrst. Não preciso nem dizer para testar em browsers modernos né?

Animated Login Form

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

jQuery Tabs

Pedro Rogério — Mon, 26 Sep 2011 11:20:52 +0000

Quer desenvolver um sistema de tabs (abas) mas não quer fazer isso com JavaScript puro? Então utilize jQuery. Existem hoje várias formas de se criar tabs com jQuery, deixo aqui uma das soluções.

Antes de tudo, vamos ao nosso HTML:

Como podem ver, não existe muito segredo no HTML, pois a coisa começa mesmo a ficar interessante no JavaScript:

$(function () {
    $('.box').each(function() {
        var content = $(this).find('.content'),
            tab     = $('> ul li', this);
        $('div', content).eq(0).show();
        tab.click(function () {
            tab.removeClass('active');
            $(this).addClass('active');
            $('div', content).hide().eq($(this).index()).show();
        });
    });
});

jQuery Tabs

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

CSS3 Polaroid Gallery

Pedro Rogério — Sat, 03 Sep 2011 23:17:16 +0000

Se você quer uma forma interessante de mostrar seu portfolio, criei esse exemplo de uma galeria com efeito Polaroid usando CSS3, em conjunto com o plugin jQuery Masonry.

As imagens utilizadas nesse experimento foram retiradas do site FFFFOUND!

CSS3 Polaroid Gallery

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Twitter Bootstrap – CSS Toolkit do Twitter

Pedro Rogério — Sat, 20 Aug 2011 19:21:59 +0000

O Twitter lançou recentemente o seu mais novo projeto chamado Twitter Bootstrap, que se trata de um set de códigos para lhe auxiliar no desenvolvimento de novos aplicativos para a web.

Ele é composto de códigos base para o auxílio na criação de formulários, botões, tabelas, grids, navegação e muitos outros itens. Mas antes de sair por aí usando, você deve saber que esse Bootstrap depende do LESS para funcionar.

Mas de qualquer forma, vale também como forma de estudo de novas técnicas no desenvolvimento front-end. UM outro Bootstrap que também vale a pena conhecer é o Bootstrap.less desenvolvido por Mark Otto.

Twitter Bootstrap – CSS Toolkit do Twitter

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

CSS no Lanche - Porque ingerir CSS na hora do lanche não engorda

Sorteio – Livro CSS3

Vimeo Lightbox Gallery

‘do a barrel roll’ com CSS3

Simple Thumbnail Carousel

Ajax RSS Widget

Fancy Image Carousel

Animated Login Form

jQuery Tabs

Tab 1

Tab 2

CSS3 Polaroid Gallery

Twitter Bootstrap – CSS Toolkit do Twitter