Web Site Design
Ousia
CSS
Criar Animações em CSS
Criar Scrolling CSS
ASP-NET
Chamando Google Tradutor De ASP.NET usando POST
Criação de um Sitemap XML do SQL Server Em ASP NET
Criar um RSS Feed para o seu site Em ASP NET e SQL Server
Mídias Sociais Tweet Share Como Siga Botões para Google Twitter e Facebook
Stored Procedure com conjuntos de dados múltiplas para a página Web
Usando dados temporários no Gridview
Segurança do site
Mídia Social
Serviços de banco de dados
Usando funções do SQL Server
Adicionando dias úteis para um Data
Calculando os dias úteis entre duas datas
Calculando os dias úteis no prazo de um mês em SQL Server
Calcule a distância entre duas coordenadas de latitude de longitude
Cordas de limpeza de texto no SQL Manter Letras e Números
Função para dividir texto em linhas de dados em SQL Server 2008
Função para retornar dia específico do mês
Limpeza de Postcodes endereço no Reino Unido no SQL Server 2008
Verificando Telefone está no formato correto Reino Unido com o SQL Server 2008
Relatórios
Claytabase Server Disk IOPs Calculator
Plano de Manutenção SQL Server 2008
Completamente removendo usuários de SQL Server
Mate todas as conexões com o banco de dados selecionado
Recriar ou reorganizar índices fragmentados
Restaurar banco de dados de procedimento armazenado
Espaço em disco e Alertas tamanho do banco
SQL-Server
Construa o seu próprio sistema de gerenciamento de conteúdo no SQL Server e ASP.NET
CUSIP Verifique Função formato correto no SQL
ISIN Verifique Função formato correto no SQL
SEDOL seleção Corrigir Função Format em SQL
Serviços empresariais
Microsoft Azure
Microsoft Office
Portfolio
Criar CSS de rolagem
O deslocamento pode economizar muito espaço e pode ser manipulado de forma muito delicada no CSS3, juntamente com o poder da imagem do CSS Sprites e algumas matemáticas, transformaremos esta imagem abaixo no banner rotativo.
Este é o Sprite que usaremos como um plano de fundo para os links.
Para criar um banner rotativo como este. Todos os links apontam para os canais de mídia social da Claytabase.
CSS
<
style
type
="text/css">
/*Sprite Backgrounds*/
.smFbk64
{
background-position
:
0px
-0px
}
.smTwi64
{
background-position
:
-66px
-0px
}
.smGoo64
{
background-position
:
-132px
-0px
}
.smLin64
{
background-position
:
-198px
-0px
}
.sm64
{
width
:
64px
;
height
:
64px
;
display
:
inline-block
;
overflow
:
hidden
;
background-image
:
url('https://www.gsclayton.net/System/Artwork/Articles/SocialMedia_64.png')
;
background-repeat
:
no-repeat
;}
.rnd50
{
border-radius
:
50%
}
/*Moving Parts*/
.parentDiv
{
width
:
64px
;
height
:
64px
;
overflow
:
hidden
;
margin
:
auto
}
.followDiv
{
width
:
320px
;
height
:
64px
;
position
:
relative
;
animation
:
followDivSlide
ease
infinite
10s
;
-webkit-animation
:
followDivSlide
ease
infinite
10s
;
-moz-animation
:
followDivSlide
ease
infinite
10s
;
-webkit-animation-fill-mode
:
forwards
;
-moz-animation-fill-mode
:
forwards
;
animation-fill-mode
:
forwards
;}
@keyframes
followDivSlide
{
from
{
left
:
0px
;}
15%
{
left
:
0px
;}
25%
{
left
:
-64px
;}
40%
{
left
:
-64px
;}
50%
{
left
:
-128px
;}
65%
{
left
:
-128px
;}
75%
{
left
:
-192px
;}
90%
{
left
:
-192px
;}
to
{
left
:
-256px
;}}
@-webkit-keyframes
followDivSlide
{
from
{
left
:
0px
;}
15%
{
left
:
0px
;}
25%
{
left
:
-64px
;}
40%
{
left
:
-64px
;}
50%
{
left
:
-128px
;}
65%
{
left
:
-128px
;}
75%
{
left
:
-192px
;}
90%
{
left
:
-192px
;}
to
{
left
:
-256px
;}}
@-moz-keyframes
followDivSlide
{
from
{
left
:
0px
;}
15%
{
left
:
0px
;}
25%
{
left
:
-64px
;}
40%
{
left
:
-64px
;}
50%
{
left
:
-128px
;}
65%
{
left
:
-128px
;}
75%
{
left
:
-192px
;}
90%
{
left
:
-192px
;}
to
{
left
:
-256px
;}}
</
style
>
/*HTML*/
<
div
class
="parentDiv">
<
div
class
="followDiv"><
a
class
="sm64 rnd50 smFbk64"
href
="https://www.facebook.com/Claytabase"></
a
><
a
class
="sm64 rnd50 smTwi64"
href
="https://twitter.com/claytabase"></
a
><
a
class
="sm64 rnd50 smGoo64"
href
="https://plus.google.com/+ClaytabaseCoUk"></
a
><
a
class
="sm64 rnd50 smLin64"
href
="https://www.linkedin.com/company/claytabase-ltd"></
a
><
a
class
="sm64 rnd50 smFbk64"
href
="https://www.facebook.com/Claytabase"></
a
></
div
>
</
div
>
O Sprite
A imagem tem 8x64 de largura e imagens altas de 8x64 combinadas como uma imagem de 658px de largura e 196px de alta, só nos interessamos as primeiras 4 imagens no momento.
Criamos 4 classes CSS para cada uma delas para criar usando a propriedade de fundo abreviada.
Como você pode ver, a imagem tem um espaço de 2px entre cada imagem, então adicionamos isso à posição, -68px, etc.
Também podemos escolher 2 classes comuns para usar todos os itens, eles definem o raio de limite e o tamanho de cada item.
O Recipiente
Esta é uma div simples, que é exatamente a mesma largura e altura (64x64) como as imagens definidas acima, definimos o transbordamento para oculto para ocultar o resto da criança.
Exemplo Div Div.
A criança / crianças
Esta é a segunda div que é movida no CSS. Definimos a altura para 64px, mas desta vez a largura deve 64px * 4, o que nos dá um total de 256px.
Neste exemplo, queremos replicar o primeiro Sprite ao final, para evitar um súbito idiota entre o Facebook e Linked In, então ajuste a largura para 320px.
A animação
Nossa animação, em seguida, move a div para posições de 0px, -64px, -128px, -192px e -256px para que apenas um item seja visível em qualquer ponto durante o movimento. Veja abaixo um exemplo, sem excesso, e no lado direito para uma ilustração de como o posicionamento move cada elemento.