My Code Box

iHover – Efeitos para imagens em CSS3

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 23:13:00 +0000

Com iHover criar efeitos e animações "hover" em imagens, nunca foi tão fácil!

Hoje trago-vos uma ferramenta que consertara lhe será muito útil na criação de efeitos "hover" em imagens.

O desenvolvimento de páginas web são cada vez mais comuns e nada melhor que poder utilizar novas ferramenta para deixar tudo mais bonito, interactivo e funcional para o utilizador.

iHover é uma biblioteca CSS3 gratuita de efeitos “hover” que podem ser utilizados na criação de sites e aplicativos para desktop e dispositivos mobile. Por não precisar de nenhum tipo de dependência esta solução pode ser utilizada em praticamente qualquer tipo de projecto.

São mais de 100 efeitos que podem ser configurados de forma simples e fácil.

Links:

Demo Download

Aproveite mais esta incrível dica para deixar os seus projectos com recursos avançados e muito mais modernos.

CSS3 Magic Animation

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 23:06:00 +0000

Aproveite e crie efeitos especiais em CSS3 utilizando o Magic CSS3 Animation.

Magic Animations CSS3 é uma ferramenta desenvolvida com animações e efeitos especiais prontos para serem utilizados em qualquer tipo de página Html. A sua utilização é muito simples, basta realizar o download dos arquivos e chamar o arquivo “magic.css” na sua página Html.

São mais de 60 tipos de efeitos que podem ser utilizados separadamente ou até mesmo em conjunto.

No site oficial do Magic Animations CSS3 poderá encontrar demonstrações em tempo real de todas as animações disponíveis e ainda encontrará toda a documentação necessária para utilizar.

Os ficheiros do Magic Animations CSS3 podem ser baixados e utilizados gratuitamente. É só baixar, configurar e usar.

Links:

Demo Download

Aproveite mais esta incrível dica para deixar os seus projectos mais modernos e com recursos avançados.

CSS Simple Shapes

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 22:53:00 +0000

Aprenda a criar formas geométricas recorrendo apenas ao fantástico CSS e CSS3.

Antes do W3C (criadores do CSS), fazerem com que fosse possível, a qualquer web designer, criar qualquer forma geométrica com CSS, e CSS3, tinha-se que recorrer a imagens, quando se queria publicar num site ou blogue um objecto desses.

Agora com o novo CSS3 tudo se tornou possível, já não é mais necessário recorrer a imagens, com apenas CSS e CSS3 tudo se tornou mais fácil e a magia aconteceu.

Veja alguns exemplos de formas geométricas que são possíveis fazer com o CSS e CSS3.

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#square {
width: 100px;
height: 100px;
background: blue;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#parallelog-am {
width: 100px;
height: 70px;
background: blue;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#parallelogram2 {
width: 100px;
height: 70px;
background: blue;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#diamond {
width: 80px;
height: 80px;
background: blue;
margin: 3px 0 0 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#rectangle {
width: 100px;
height: 60px;
background: blue;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#trapez {
height: 0;
width: 100px;
border-bottom: 100px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#trapez2{
height: 0;
width: 100px;
border-top: 100px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#trapez3{
height: 100px;
width: 0;
border-right: 100px solid green;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#trapez4{
height: 100px;
width: 0;
border-left: 100px solid green;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#triangleUp {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#triangleRight {
width: 0;
height: 0;
border-left: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#triangleDown {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#triangleLeft {
width: 0;
height: 0;
border-right: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#half-circleTop{
background: orange;
height: 45px;
width: 90px;
-moz-border-radius:90px 90px 0 0;
-webkit-border-radius:90px 90px 0 0;
border-radius:90px 90px 0 0;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#half-circleRight {
background: orange;
height: 90px;
width: 45px;
-moz-border-radius:0 90px 90px 0;
-webkit-border-radius:0 90px 90px 0;
border-radius:0 90px 90px 0;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#half-circleBottom{
background: orange;
height: 45px;
width: 90px;
-moz-border-radius: 0 0 90px 90px ;
-webkit-border-radius: 0 0 90px 90px;
border-radius:0 0 90px 90px ;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#half-circleLeft {
background: orange;
height: 90px;
width: 45px;
-moz-border-radius:90px 0 0 90px;
-webkit-border-radius:90px 0 0 90px;
border-radius:90px 0 0 90px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#circle {
width: 90px;
height: 90px;
background: yellow;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#ovalHor {
width: 180px;
height: 90px;
background: orange;
-moz-border-radius:90px/ 45px;
-webkit-border-radius:90px/45px;
border-radius:90px/45px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#ovalVert{
width: 90px;
height: 180px;
background: orange;
-moz-border-radius:45px/90px;
-webkit-border-radius:45px/90px;
border-radius:45px/90px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#chartColorful{
width: 0px;
height: 0px;
border-right: 60px solid purple;
border-top: 60px solid yellow;
border-left: 60px solid black;
border-bottom: 60px solid blue;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius: 60px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#quartercircleTop{
width: 90px;
height: 90px;
background:yellow;
-moz-border-radius: 90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
border-radius: 90px 0 0 0;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#quartercircleRight{
width: 90px;
height: 90px;
background:yellow;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
border-radius:0 90px 0 0;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#quartercircleBottom{
width: 90px;
height: 90px;
background:yellow;
-moz-border-radius: 0 0 90px 0;
-webkit-border-radius: 0 0 90px 0;
border-radius:0 0 90px 0;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#quartercircleLeft{
width: 90px;
height: 90px;
background:yellow;
-moz-border-radius: 0 0 0 90px;
-webkit-border-radius: 0 0 0 90px;
border-radius:0 0 0 90px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#chartTop{
width: 0px;
height: 0px;
border-right: 60px solid purple;
border-top: 60px solid transparent;
border-left: 60px solid purple;
border-bottom: 60px solid purple;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius:60px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#chartRight{
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid purple;
border-left: 60px solid purple;
border-bottom: 60px solid purple;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius: 60px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#chartBottom{
width: 0px;
height: 0px;
border-right: 60px solid purple;
border-top: 60px solid purple;
border-left: 60px solid purple;
border-bottom: 60px solid transparent;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius: 60px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#chartLeftt{
width: 0px;
height: 0px;
border-right: 60px solid purple;
border-top: 60px solid purple;
border-left: 60px solid transparent;
border-bottom: 60px solid purple;
-moz-border-radius:60px;
-webkit-border-radius:60px;
border-radius:60px;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#heart { position: relative }
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 70px;
    top: 0;
    width: 70px;
    height: 115px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin : 100% 100%;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#triangleUpLeft{
width: 0;
height: 0;
border-top: 50px solid red;
border-bottom: 50px solid transparent;
border-left: 50px solid red;
border-right: 50px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#triangleUpRight"{
width: 0;
height: 0;
border-top: 50px solid red;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid red;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#bookmark-ribbon {
width: 0;
height: 100px;
border-left: 50px solid red;
border-right: 50px solid red;
border-bottom: 35px solid transparent;
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#twelve-point-star { 
height: 100px; 
width: 100px; 
background: red; 
position: absolute;
}
#twelve-point-star:before {
height: 100px; 
width: 100px; 
background: red; 
content:""; 
position: absolute; 
/* Rotate */ 
-moz-transform: rotate(30deg); 
-webkit-transform: rotate(30deg); 
-ms-transform: rotate(30deg); 
-o-transform: rotate(30deg); 
transform: rotate(30deg); 
} 
#twelve-point-star:after { 
height: 100px; 
width: 100px; 
background: red; 
content:""; 
position: absolute; 
/* Rotate */ 
-moz-transform: rotate(-30deg); 
-webkit-transform: rotate(-30deg); 
-ms-transform: rotate(-30deg); 
-o-transform: rotate(-30deg); 
transform: rotate(-30deg); 
}

Para copiar o código clicar no ícone abaixo

Para copiar o código clicar no ícone abaixo

#six-point-star {
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-bottom: 80px solid red;
}
#six-point-star:after {
   content:"";
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-top: 80px solid red;
   margin: 30px 0 0 -50px;
}

Gerador de Formas em CSS: Aqui

Html5 – Guia dos Elementos

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 22:30:00 +0000

Guia completo dos elementos Html5.

HTML5 Elements

Lista alfabética

Tag	Grups	HTML4	HTML5	Description
<!DOCTYPE>				Defines the document type
<a>				Defines a hyperlink
<abbr>				Defines an abbreviation
<acronym>				Not supported in HTML5. Defines an acronym
<address>				Defines contact information for the author/owner of a document
<applet>				Not supported in HTML5. ecated in HTML 4.01. Defines an embedded applet
<area>				Defines an area inside an image-map
<article>				Defines an article
<aside>				Defines content aside from the page content
<audio>				Defines sound content
<b>				Defines bold text
<base>				Specifies the base URL/target for all relative URLs in a document
<basefont>				Not supported in HTML5. ecated in HTML 4.01. Specifies a default color, size, and font for all text in a document
<bdi>				Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo>				Overrides the current text direction
<big>				Not supported in HTML5. Defines big text
<blockquote>				Defines a section that is quoted from another source
<body>				Defines the document's body
<br>				Defines a single line break
<button>				Defines a clickable button
<canvas>				Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption>				Defines a table caption
<center>				Not supported in HTML5. ecated in HTML 4.01. Defines centered text
<cite>				Defines the title of a work
<code>				Defines a piece of computer code
<col>				Specifies column properties for each column within a <colgroup> element
<colgroup>				Specifies a group of one or more columns in a table for formatting
<command>				Defines a command button that a user can invoke
<datalist>				Specifies a list of pre-defined options for input controls
<dd>				Defines a description/value of a term in a description list
<del>				Defines text that has been deleted from a document
<details>				Defines additional details that the user can view or hide
<dfn>				Defines a definition term
<dialog>				Defines a dialog box or window
<dir>				Not supported in HTML5. ecated in HTML 4.01. Defines a directory list
<div>				Defines a section in a document
<dl>				Defines a description list
<dt>				Defines a term/name in a description list
<em>				Defines emphasized text
<embed>				Defines a container for an external (non-HTML) application
<fieldset>				Groups related elements in a form
<figcaption>				Defines a caption for a <figure> element
<figure>				Specifies self-contained content
<font>				Not supported in HTML5. ecated in HTML 4.01. Defines font, color, and size for text
<footer>				Defines a footer for a document or section
<form>				Defines an HTML form for user input
<frame>				Not supported in HTML5. Defines a window (a frame) in a frameset
<frameset>				Not supported in HTML5. Defines a set of frames
<h1> to <h6>				Defines HTML headings
<head>				Defines information about the document
<header>				Defines a header for a document or section
<hr>				Defines a thematic change in the content
<html>				Defines the root of an HTML document
<i>				Defines a part of text in an alternate voice or mood
<iframe>				Defines an inline frame
<img>				Defines an image
<input>				Defines an input control
<ins>				Defines a text that has been inserted into a document
<kbd>				Defines keyboard input
<keygen>				Defines a key-pair generator field (for forms)
<label>				Defines a label for an <input> element
<legend>				Defines a caption for a <fieldset> element
<li>				Defines a list item
<link>				Defines the relationship between a document and an external resource (most used to link to style sheets)
<map>				Defines a client-side image-map
<mark>				Defines marked/highlighted text
<menu>				Defines a list/menu of commands
<meta>				Defines metadata about an HTML document
<meter>				Defines a scalar measurement within a known range (a gauge)
<nav>				Defines navigation links
<noframes>				Not supported in HTML5. Defines an alternate content for users that do not support frames
<noscript>				Defines an alternate content for users that do not support client-side scripts
<object>				Defines an embedded object
<ol>				Defines an ordered list
<optgroup>				Defines a group of related options in a drop-down list
<option>				Defines an option in a drop-down list
<output>				Defines the result of a calculation
<p>				Defines a paragraph
<param>				Defines a parameter for an object
<pre>				Defines preformatted text
<progress>				Represents the progress of a task
<q>				Defines a short quotation
<rp>				Defines what to show in browsers that do not support ruby annotations
<rt>				Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>				Defines a ruby annotation (for East Asian typography)
<s>				Defines text that is no longer correct
<samp>				Defines sample output from a computer program
<script>				Defines a client-side script
<section>				Defines a section in a document
<select>				Defines a drop-down list
<small>				Defines smaller text
<source>				Defines multiple media resources for media elements (<video> and <audio>)
<span>				Defines a section in a document
<strike>				Not supported in HTML5. ecated in HTML 4.01. Defines strikethrough text
<strong>				Defines important text
<style>				Defines style information for a document
<sub>				Defines subscripted text
<summary>				Defines a visible heading for a <details> element
<sup>				Defines superscripted text
<table>				Defines a table
<tbody>				Groups the body content in a table
<td>				Defines a cell in a table
<textarea>				Defines a multiline input control (text area)
<tfoot>				Groups the footer content in a table
<th>				Defines a header cell in a table
<thead>				Groups the header content in a table
<time>				Defines a date/time
<title>				Defines a title for the document
<tr>				Defines a row in a table
<track>				Defines text tracks for media elements (<video> and <audio>)
<tt>				Not supported in HTML5. Defines teletype text
<u>				Defines text that should be stylistically different from normal text
<ul>				Defines an unordered list
<var>				Defines a variable
<video>				Defines a video or movie
<wbr>				Defines a possible line-break

Veja também Quick Reference Guide

Aqui

Menus em CSS3 e jQuery

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 22:21:00 +0000

Colecção de menus em CSS3 e jQuery para melhorar a aparência do seu site ou blogue.

LIVE DEMO DOWNLOAD

Blogger – Templates Grátis

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 22:00:00 +0000

Colecção de temas grátis para fazer o seu blogue (Blogger) mais bonito e interessante.

LIVE DEMO DOWNLOAD

Blogger - Templates Grátis

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 21:45:00 +0000

Colecção de temas grátis para fazer o seu blogue (Blogger) mais bonito, moderno e interessante.

LIVE DEMO DOWNLOAD

WordPress – Nemo tema grátis para loja online

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 21:28:00 +0000

DXThemes é um site de temas para o Wordpress e através do site InkyDealses estão a dar um brinde maravilhoso e que vocês vão adorar! É uma loja online totalmente funcional com WordPress e WooCommerce.

Este tema proporciona ao proprietário da loja todas as ferramentas necessárias para a execução de um negócio online. É fácil de instalar, executar e actualizar.

A interface intuitiva WooCommerce torna fácil adicionar, gerir e modificar os seus produtos.

Quer desenvolver uma loja online e não sabe como o fazer? Contacte-me que eu poderei ajudá-lo nessa missão.

LIVE DEMO DOWNLOAD

SuperPNG – Plugin de Compressão de Imagens PNG

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 21:18:00 +0000

A utilização de imagens PNG são uma necessidade devido às suas características únicas de transparência.

Por essa razão a necessidade de criar bons arquivos PNG tornou-se muito importante.

O Plugin para Photoshop SuperPNG permite que você faça isso. Ele suporta compressões sem perdas de qualidade e cria imagens PNG que podem ser lidas por todos os navegadores modernos. Também suporta controle do canal Alpha, compressão variável entre outras opções.

Este plugin é pago mas pode ser utilizado durante 15 dias gratuitamente.

Site DOWNLOAD

GLYPHICONS – Icones Grátis

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 20:23:00 +0000

O site Glyphicons oferece um conjunto de ícones para download gratuitamente.

O pack grátis inclui a versão menor dos ícones no entanto são 520 icones, também existem duas opções pagas com bastantes outros recursos.

Demo Download

Photoshop Plugins – CSS3Ps

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 20:00:00 +0000

CSS3Ps é um plugin grátis para o Photoshop e com ele consegue-se obter o CSS3 para implementar no seu site.

Com este plugin pode criar elementos no seu Photoshop e obter o código CSS3 para implementar esse elemento no seu site, não como imagem, como seria normal, mas apenas em CSS3, ele lhe dá a(s) cor(es), o tamanho, o tamanho da fonte, a família da fonte, etc. Basta copiar o código e colar no seu CSS da página.

Para que isto funcione no seu Photoshop, basta baixar e instalar o plugin, depois é só criar e obter o devido código. Fácil e muito útil.

LIVE DEMO DOWNLOAD

24 Efeitos no Photoshop para Imagens

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 19:47:00 +0000

Neste artigo pode ver 24 efeitos que se podem fazer em fotos ou imagens utilizando o Photoshop.

Clique no titulo das imagens para ver os tutoriais.

Photoshop HDR Tutorial

Vanishing Point Filter

Técnicas simples de retoque facial

4 Técnincas simples para criar imagens criativas

Método manual para coloração de imagens preto e branco

Como funciona o Lens Correction

Usando o Channel Mixer

Ajuste rápido para fundos estranhos

Envelhecendo Imagens

Suavizando texturas de pele

Tutorial Tilt-shift Avançado

Técnica do Falso Tilt-shift

HDR usando Layers

Imagens HDR de alta qualidade

A maneira correta de converter imagens coloridas em preto e branco

Brincando com as cores dos cabelos

Criando uma imagem do pôr-do-sol

Trabalhando com blendings e exposure

Usando a funcionalidade HDR do Photoshop

Vignette 2.0

Como usar brilho para dramatizar suas fotos

Melhorando paisagens

Usando máscaras para aprimorar imagens de paisagens

Correção de cor

CSS3 – Text Gradient

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 19:36:00 +0000

Text gradient é um efeito bastante simples e interessante que se tornou possível com o CSS3, na verdade este efeito é a aplicação de um gradiente para preenchimento do texto.
Esta forma de se dar a(s) cor(es) ao texto serve para substituir ou utilizar imagens de texto, que anteriormente era a única forma de se conseguir este tipo de efeito.

CSS3 Text Gradient

Existem várias maneiras de se obter o efeito text gradient utilizando o CSS3, no entanto da maneira que vos vou mostrar não é necessário fazer alterações no HTML.

Portanto aplica-se um titulo ao texto onde se deseja o efeito;

Para copiar o código clicar no ícone abaixo

<h2>TEXT GRADIENT</h2>

Para copiar o código clicar no ícone abaixo

h2 {
font-size:60px;
/*background-clip*/
-webkit-background-clip:text;
   -moz-background-clip:text;
        background-clip:text;
-webkit-text-fill-color:transparent;
background: #d0e4f7;
/*linear-gradient*/
background: -moz-linear-gradient(top,  #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea));
background: -webkit-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
background: -o-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
background: -ms-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
background: linear-gradient(to bottom,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 );
}

Veja o Exemplo anterior:

TEXT GRADIENT

O que se pode modificar

- As cores do Gradient: Basta trocar os valores pelos das cores do seu gradiente, se isso for um pouco complicado para si que não domina o CSS, então vá ao site que lhe vou indicar, escolha ou faça o seu gradiente, copie o código gerado e substitua o do exemplo acima. Note que só deve substituir o código referente às cores e que começa por, background. Aqui

- O tamanho da fonte: font-size:60px; Basta trocar o 60 por outro tamanho.

Lembre-se que este, tal como outros efeitos só serão visíveis em browsers compatíveis com CSS3. Veja este caso, Aqui

Gerador - Long Shadows

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 19:26:00 +0000

Uma óptima ferramenta para criar sombras longas em CSS3

Veja um exemplo a baixo;

SOMBRA LONGA

No caso acima o código é o seguinte;

Para copiar o código clicar no ícone abaixo

<div class="text_LongShadow">SOMBRA LONGA</div>

Para copiar o código clicar no ícone abaixo

.text_LongShadow {
height: 100px;
width: 50%;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 0 auto;
  background-color: rgb(0, 173, 244);
   text-shadow: rgb(0, 147, 208) 1px 1px,
    rgb(0, 148, 209) 2px 2px,
    rgb(0, 149, 210) 3px 3px,
    rgb(0, 150, 211) 4px 4px,
    rgb(0, 151, 213) 5px 5px,
    rgb(0, 152, 214) 6px 6px,
    rgb(0, 153, 215) 7px 7px,
    rgb(0, 153, 216) 8px 8px,
    rgb(0, 154, 218) 9px 9px,
    rgb(0, 155, 219) 10px 10px,
    rgb(0, 156, 220) 11px 11px,
    rgb(0, 157, 221) 12px 12px,
    rgb(0, 158, 223) 13px 13px,
    rgb(0, 159, 224) 14px 14px,
    rgb(0, 160, 225) 15px 15px,
    rgb(0, 160, 226) 16px 16px,
    rgb(0, 161, 227) 17px 17px,
    rgb(0, 162, 229) 18px 18px,
    rgb(0, 163, 230) 19px 19px,
    rgb(0, 164, 231) 20px 20px,
    rgb(0, 165, 232) 21px 21px,
    rgb(0, 166, 234) 22px 22px,
    rgb(0, 166, 235) 23px 23px,
    rgb(0, 167, 236) 24px 24px,
    rgb(0, 168, 237) 25px 25px,
    rgb(0, 169, 239) 26px 26px,
    rgb(0, 170, 240) 27px 27px,
    rgb(0, 171, 241) 28px 28px,
    rgb(0, 172, 242) 29px 29px,
    rgb(0, 173, 244) 30px 30px;
   box-shadow: rgb(217, 217, 217) 1px 1px,
    rgb(218, 218, 218) 2px 2px,
    rgb(219, 219, 219) 3px 3px,
    rgb(220, 220, 220) 4px 4px,
    rgb(221, 221, 221) 5px 5px,
    rgb(222, 222, 222) 6px 6px,
    rgb(223, 223, 223) 7px 7px,
    rgb(224, 224, 224) 8px 8px,
    rgb(225, 225, 225) 9px 9px,
    rgb(226, 226, 226) 10px 10px,
    rgb(227, 227, 227) 11px 11px,
    rgb(228, 228, 228) 12px 12px,
    rgb(229, 229, 229) 13px 13px,
    rgb(230, 230, 230) 14px 14px,
    rgb(231, 231, 231) 15px 15px,
    rgb(232, 232, 232) 16px 16px,
    rgb(233, 233, 233) 17px 17px,
    rgb(234, 234, 234) 18px 18px,
    rgb(235, 235, 235) 19px 19px,
    rgb(236, 236, 236) 20px 20px,
    rgb(236, 236, 236) 21px 21px,
    rgb(237, 237, 237) 22px 22px,
    rgb(238, 238, 238) 23px 23px,
    rgb(239, 239, 239) 24px 24px,
    rgb(240, 240, 240) 25px 25px,
    rgb(241, 241, 241) 26px 26px,
    rgb(242, 242, 242) 27px 27px,
    rgb(243, 243, 243) 28px 28px,
    rgb(244, 244, 244) 29px 29px,
    rgb(245, 245, 245) 30px 30px,
    rgb(246, 246, 246) 31px 31px,
    rgb(247, 247, 247) 32px 32px,
    rgb(248, 248, 248) 33px 33px,
    rgb(249, 249, 249) 34px 34px,
    rgb(250, 250, 250) 35px 35px,
    rgb(251, 251, 251) 36px 36px,
    rgb(252, 252, 252) 37px 37px,
    rgb(253, 253, 253) 38px 38px,
    rgb(254, 254, 254) 39px 39px,
    rgb(255, 255, 255) 40px 40px;
}

Experimentem vocês mesmo.

Aqui

Publicar no Facebook os Artigos do WordPress

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 19:12:00 +0000

Aprenda como vincular o seu site ou blogue WordPress, a uma página do Facebook. Desta forma qualquer artigo que escreva no seu WordPress pode ser publicado automaticamente no Facebook.

Antes de avançar veja que a utilização deste plugin trás a vantagens de que elimina a necessidade de copiar e colar o que publicou no seu site para o Facebook. Este processo é feito automaticamente pelo plugin;

Instalar e Configurar

- O primeiro passo é entrar no painel de administração do WordPress e instalar o plugin Facebook Page Publish (clique aqui para conhecer melhor este plugin).

- Ao finalizar a instalação active o plugin, de seguida ainda no painel de administração, vá ao menu Opções e clique em Facebook Page Publish. Aparecerá a seguinte página;

Agora teremos que configurar o plugin:

1º (Facebook Connection) - Fazer com que o plugin consiga conectar o Facebook;
2º (Publishing) - Define o perfil ou página do Facebook no qual quer que os artigos serão publicados, assim como as categorias que deseja publicar;
3º (Customization) - Aqui personaliza a aparência da publicação no Facebook;

Para permitir que o plugin faça uma conexão ao seu Facebook, deverá criar um aplicativo através do página de programadores do Facebook: aqui.

Criação de Aplicativo do Facebook

Se ainda não se registou como programador no Facebook, terá que o fazer agora, não é nada complicado, basta seguir os passos que a página indica.

No final deverá clicar em Criar Nova Aplicação, escolher um nome para seu aplicativo (Display Name), escolher a categoria (pode ser uma qualquer), e clicar em “Criar Aplicação”.

- Assim que fizer isto, aparecerá uma página com as informações do seu novo aplicativo.

- Nesta página deverá preencher com o URL do seu site e clicar em “Guardar Alterações”.

- Após isso, copie as informações Identificação da aplicação e App Secret (veja as setas destacadas a vermelho na imagem abaixo);

- Copie a informações do seu novo aplicativo do Facebook e coloque estes dados nas configurações do plugin do seu WordPress, e clique em “Access granted”.

- Ao clicar em “Access granted”, deverá dar algumas permissões de acesso ao seu Facebook por parte do Plugin, (aquelas permissões que os aplicativos pedem sempre);

Importante: A versão do plugin pode ter um problema relacionado com uma actualização da API do Facebook. Se deparar-se com algum erro, leia a informação no topo da página do plugin e siga as instruções:

- O passo seguinte é definir é preencher o campo 2. Publishing, na página do plugin, com o Id “Page or profile ID” da página do seu Facebook, ou daquele onde pretende publicar os artigos do WordPress;

- Finalmente, no item 3. Customization, poderá personalizar o que irá para o Facebook, como o thumbnail do artigo, o resumo, o autor, entre outras configurações.

Após realizar tudo isso, o seu site deverá estar apto a publicar automaticamente os conteúdos no Facebook.

Agora, em cada artigo que criar ou que já criou, haverá uma caixa de opção Publish to Facebook.

Teste e verifique se está tudo a funcionar, caso haja algum problema verifique se efectuou todos os passos descritos anteriormente.

Qualquer dúvida, estou a sua disposição, faça o seu comentário abaixo!

Bootswatch dá estilo ao Bootstrap

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 17:30:00 +0000

O Bootswatch não é um template para o Bootstrap, este é um site que disponibiliza de uma forma gratuita 12 novos temas para personalizar sites desenvolvidos com o Bootstrap.

Veja 2 exemplos;

clique nas imagens para ver

O Bootswatch disponibiliza as folhas de estilo em CSS, que irão substituir as originais que vêm com o Bootstrap e transformam completamente as páginas e os elementos originais.

Só é necessário escolher o tema, fazer o download e substituir o arquivo com o mesmo nome que têm no seu Bootstrap original.

Para quem começou recentemente a trabalhar com o Bootstrap ou para quem não têm grandes conhecimentos de CSS, esta é sem dúvida uma óptima forma de alterar o aspecto do site que fez ou baixou.

Site Oficial Bootswatch

CONHEÇA MELHOR

Bootstrap para Sites de Grande Qualidade

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 17:16:00 +0000

Bootstrap, conheça este incrível Framework em HTML, CSS e JS, para o ajudar no desenvolvimento de WebSites de grande qualidade, e melhor ainda, é completamente grátis.

Pois é, o Bootstrap está-se a revelar uma ferramenta viral, não param de aparecer ferramentas para complementar este Framework, e isso é sinal de que esta ferramenta está cada vez mais implementada no "mundo" da criação de conteúdos Front-end, seja por programadores e criadores profissionais de webSites, ou por pessoas com menos conhecimentos de códigos e que ainda assim podem desenvolver projectos bonitos, actuais e altamente funcionais.

Para editar os arquivos que vêm com o Bootstrap deve ter um editor de código (Bootstrap recomenda o Sublime Text 2, mas eu costumo utilizar Notepad++) e deverá possuir também alguns conhecimento de HTML e CSS, já em relação a Javascript não é obrigatório, mas se tiver alguns conhecimentos pode ser bastante útil em algumas situações.

Bootstrap

CONHECER MELHOR DOWNLOAD V 3.0.3

Globo Bootstrap

Igual ao original mas traduzido para o Português do Brasil

CONHECER MELHOR DOWNLOAD V 2.2.2

Notepad++

CONHECER MELHOR DOWNLOAD V 6.5.3

Sublime Text 2

CONHECER MELHOR PÁGINA DOWNLOAD

Brevemente publicarei mais informações e dicas sobre esta ferramenta, aguarde...

22 Slideshow jQuery Grátis

noreply@blogger.com (Anonymous) — Mon, 05 Jan 2015 00:28:00 +0000

São 22 dos melhores Slideshow jQuery plugins para o ajudar a começar o seu projecto.
Todas estes Slideshow são 100% gratuito para uso pessoal ou comercial, dê uma vista de olhos e faça já a sua galeria de imagens.

My Code Box

iHover – Efeitos para imagens em CSS3

CSS3 Magic Animation

CSS Simple Shapes

Html5 – Guia dos Elementos

HTML5 Elements

Lista alfabética

Menus em CSS3 e jQuery

Blogger – Templates Grátis

Blogger - Templates Grátis

WordPress – Nemo tema grátis para loja online

SuperPNG – Plugin de Compressão de Imagens PNG

GLYPHICONS – Icones Grátis

Photoshop Plugins – CSS3Ps

24 Efeitos no Photoshop para Imagens

CSS3 – Text Gradient

TEXT GRADIENT

O que se pode modificar

Gerador - Long Shadows

Publicar no Facebook os Artigos do WordPress

Bootswatch dá estilo ao Bootstrap

Bootstrap para Sites de Grande Qualidade

Bootstrap

Globo Bootstrap

Notepad++

Sublime Text 2

22 Slideshow jQuery Grátis

Ultimate Image Swap Gallery

SlideShow Responsive

PhotoSwipe

Fenda Slider

Responsive Image Gallery With Thumbnail Carousel

Fullscreen Background Image Slideshow With CSS3

Slideshow

Fullscreen Slideshow With Html5 Audio And Jquery

SIDEWAYS – jQuery fullscreen image gallery

Supersized

FerroSlider

Fullscreen Video Slideshow With Bigvideo.JS

Fullscreen Background Slideshow

Showcase Vertical

Smooth Touch Scroll

AnythingSlider

Really Simple Slideshow

Fullscreen Image Blur Effect With Html5

Pikachoose

Livre Jquery Slideshow Plugin

Skitter Slideshow

Advanced jQuery Background Image Slideshow

10 Slideshow FullScreen Grátis

Fabthemes - WordPress Premium Temas Grátis

Facebook Like Box Widget – Lateral

Filtros do Photoshop - Tradução e Exemplos

Artistic/Artístico

Blur/Desfoque

Brush Strokes/Traçados de Pincel

Distort/Distorção

Noise/Ruído

Pixelate/Pixelização

Render/Acabamento

Sharpen/Tornar Nítido

Sketch/Croqui

Stylize/Estilização

Texture/Textura

Other/Outros

SEO - Optimização do Website para Motores de Pesquisa

24 Efeitos no Photoshop para Imagens

Windows ou Linux para Hospedar um Site?

Servidores Windows

Servidores Linux

Informação para Programadores

Informação para Utilizadores em Geral

Conclusão