Expressá-la

Outra tut rápido. Aqui é algo simples e agradável usando o poder do CSS ... mas foi concieve difícil (e certamente não era eu), para começar. Adicionando Dropshadow, pode ser um pedaço de bolo para muitos de nós, usando algumas ferramentas de edição de imagem como o Photoshop anf fogos de artifício etc
A razão pela qual, optei por sombra usando CSS é que, geralmente durante a criação de um design de página / html de um aplicativo, os requisitos de manter a iteração. O que quero dizer é, em um site já existente, com muitas imagens, como as que exibem freinds lista ou uma galeria de imagens, será difícil para o reprocessamento de toda a carga de imagens que já haviam sido descarregadas para adicionar ou remover as sombras, para que matéria.
Então, se você fez um pouco de pensamento frente ao criar os htmls para adicionar essas divisões extras ou geralmente a situação é que você tem uma lógica de loop gerando esses ícones / Miniaturas em XSL, PHP. JAVA ou qualquer linguagem de programação / scripting outro, você pode adicioná-la a qualquer momento, então é apenas a questão de mostrar e esconder essas sombras usando a propriedade Display CSS, como por os clientes em constante mudança requisitos ... Eu havn't feito esse tipo de visão de futuro antes disso ... mas ahev começou agora!

No exemplo abaixo, a imagem original é a sombra livre e as dropshadows são aplicados como necessário! Além disso, eu ter ido um pouco mais, usando os truques da minha Tut anteriores (Well! estes são, provavelmente, menor variedade de tutoriais, por isso só se justifica chamá-los de "Tut" 's) sobre Usando CSS propriedade do clipe para mostrar apenas

Imagem Original

Dropshadow Resultados CSS

Veja o Demo | Download de SourceFiles

Por que eu quero entender isso?? Humm ...!!

A maioria dos escritores CSS concordaria que o CSS propriedade Clip é provavelmente uma das propriedades não-utilizados CSS. Era tão verdadeiro para mim também e foi mais feliz para negligenciá-lo, até que comecei a modificar o MooTools DOIS Knob componente Slider (pino) (com indicador de Range) .

Houve uma boa sugestão de um dos utilizadores de componentes para modificar o componente deslizante utilizando imagens recortadas backgroud (contra uma divisão de largura variável) para indicar a gama deslizante. Assim chegou a minha hora de entrar na diversão, mas un fretado (para mim é claro) águas da propriedade Clip CSS.

Bem! quão difícil pode ser? Não muita coisa ... SIM e NÃO. A sintaxe a utilizar a propriedade Clip CSS é muito vertical, mas o significado / usuage é um pouco croocked. Com uma memória como a minha, toda vez que eu sento para retocar a minha Script Slider ... Tenho tokeep referindo-se ao uso desta propriedade CLIP, para me lembrar a lógica que eu criei no meu script .... DAÍ! pensado para pen-lo para baixo, com uma esperança de lembrar que o futuro (e também para o benefício daqueles que parecem boggled pela propriedade Clip CSS)

O que Clipe CSS fazer?

Clipe é parte do módulo de efeitos visuais do CSS 2,1. Simplificando, seu trabalho é colocar uma janela visível em cima de um objeto que está sendo cortada, portanto, recorte de imagens e criação de miniaturas sem ter que criar arquivos adicionais (Já coloquei este recurso para melhorar o uso do componente Slider )

Usando a propriedade Clip CSS, você pode criar um recorte usando a forma rect. Como muitas outras propriedades CSS (como margem de preenchimento etc,), utilizando rect requer quatro coordenadas superior, inferior, direita, esquerda (TRBL). A natureza croocked desta propriedade reflete quando você dar uma olhada no clipe como calcula a região de corte, usando essas quatro coordenadas (envia cérebro em um lance por um tempo). Agora, para confundi-lo do fundo começa a partir do topo, eo direito começa a partir da esquerda. . Você vê o que eu disse? .... Por isso este post ...

Esta pequena confusão pode facilmente desaparecer, com esta explicação visual da propriedade CSS Clip / rect como abaixo!!

Clipe Requisitos CSS

A tarefa que temos começado é para cortar a imagem em miniatura a seguir em uma imagem mais quadrada olhando (e também uma imagem de grande-angular)

Thumbnal Original / Imagem	Requisitos Clipe para Sqaure Thumbmail

Clipe Resultados CSS

Veja o Demo | Download de SourceFiles

Esta questão passou pela minha cabeça algumas vezes antes, quando eu estava trabalhando em locais anteriormente também, que usou o WordPress para mostrar blogs ou novo tipo de conteúdo em alguma parte do site / portal.Being um novato em PHP e em torno de WordPress, eu mantive procastinating, pensando "isto não é o meu pedaço de bolo". Finalmente! essa exigência veio até o meu nariz, quando começou a cavar em torno de um bit para a solução.
Fiquei surpreso ao descobrir que ele realmente era mais fácil do que eu realmente pensei que era, para exibir uma lista de títulos ou a última mensagem em qualquer outra página fora da seção WordPress-powered, usando apenas um pouco de PHP e da API do WordPress .

Aqui está o que fazer: -
Por razões de explicação, suponha que seu site é http://www.inchembur.com/ e você tem a seção de notícias deste site em http://news.inchembur.com/ (que está executando WordPress). Agora, a exigência é para mostrar o mais recente post de http://news.inchembur.com/ na página inicial do site principal, ou seja, http://www.inchembur.com/index.php

Passo 1: No seu index.php adicionar o seguinte pedaço de código, incluir o WordPress arquivo API. Você pode adicionar esta para o topo da página que você deseja que o seu post para aparecer.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); uso / / Disbable de Tema WordPress
require ('/ var / news.inchembur.com / wp-blog de ​​header.php'); / / Incluir WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Pega Última Mensagem
?>

No pedaço acima de inclusão, estamos recebendo apenas a postagem mais recente single. se você quiser experimentar variações mais sinta-se livre para cavar, query_posts() documentação .

Passo 2: Agora, na parte da página Index / Home onde você quer mostrar o mais recente de pós WordPress http://news.inchembur.com , use o seguinte código. Escusado será dizer que, se sentir livre para ad suas divisões de estilo, vãos e classes como por suas necessidades do projeto.

Passo 3: Não há Etapa 3 ... É isso ... está pronto!

Como mostrar uma página específica de pós / ao contrário da última mensagem: -
Isto pode ser facilmente conseguido se alterar os argumentos para query_posts() para incluir a identificação da página ou página slug

) ; query_posts ('page_id = 7');
) ; query_posts ('pagename = sobre');

ou Você pode controlar o número de mensagens:
) ; query_posts (showposts = 3);

Às vezes, para manter o pageweight baixo ... nós dividimos nossos scripts em fragmentos ... Estes fragmentos javascript pode ser carregado como e quando necessário (em um evento ou ao clicar em um link ou botão, etc.)

Javascripts Carregando dinamicamente é simples e muito para a frente como abaixo ...

= “text/javascript” > <Tipo de script = "text / javascript">
função loadNewScript (fonte) {
var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript');
s.setAttribute ('src', fonte);
document.body.appendChild (s);
}
</ Script>

e você pode ter o link seguinte chamada em qualquer lugar do corpo, ou você pode ter este script "onLoad" do documento em si ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript ('myDynamicScript.js');"> Script Carga Dinâmica </ a>

ou

<body onload="loadNewScript('myDynamicScript.js');">

Se você é uma pessoa css, você sabe a dor na obtenção de seus layouts de trabalho cross-browser. IE8 é mais uma chave inglesa nos trabalhos para os desenvolvedores de nós. Anywaz! se você bater em cima desta questão, como eu fiz ontem, onde o seu CSS funcionando perfeitamente no IE7 (e anterior) e Firefox tem de repente começou a birra no IE8, tente este ... É bem parecia resolver os meus problemas para o momento ....

Usando declaração Meta, podemos especificar o motor de renderização que gostaria de usar o IE8. Então, para forçar o IE8 para renderizar como IE7 ... Insira o Tag Meta seguinte na cabeça de seu documento: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Por padrão Meta IE seria: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
o que tornaria o IE8 renderizar a página usando o modo padrão novo.

Se necessário, esta sintaxe poderia ser usado para acomodar para outros navegadores como abaixo:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Mais sobre doctypes:

Se você ainda não familiarizados com o tipo de animal chamado "Doctype" ... está aqui alguma leitura rápida
Quais são DOCTYPES? Quais são Peculiaridades BROWSER e modo estrito?
Definir o DOCTYPE no XSL

Para um mais profundo entendimento sobre DOCTYPES, tente visitar esses links ...
A List Apart: Fixe seu site com o DOCTYPE direito!
A List Apart: Beyond DOCTYPE: Web Standards, compatibilidade e IE8

Nota: Embora muitos de nós HTML / CSS pessoas têm negligenciado a importância de decleration DOCTYPE em nossos documentos, Definir o DOCTYPE correto, é geralmente a resposta a problemas com o navegador mais transversais.

Com uma variedade de carrosséis lá fora, muitos para Mootools também, eu ainda decidi escrever minha própria classe Carousel, por algumas boas razões
1. Espontânea um recurso de paginação (para ser capaz de saltar um slide particular / passo no carrossel).
2. Desejavam a liberdade com a colocação dos botões ESQUERDA e DIREITA / links, onde quer que eu por favor.
3. Mais controle sobre os passos de slides.

Eu consegui criar um novo carrossel, com as características acima ... como abaixo ... Sinta-se livre para sugerir as modificações que exijam!

Meu exemplo parecido com este ... [ Ver Demo ]

Veja o Demo | Download de Mootools carrossel com paginação Versão 1.0 (baixado 1991 vezes)

1. Paging Carousel

Você pode facilmente adicionar a paginação para o carrossel, simplesmente definindo o sinalizador de paginação, que é parater última passou ao criar a instância do MooCarousel a verdade (quer paginação) ou falso (donot querendo paginação).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = número de slides, sss = tamanho do passo de slides

E claro que você pode mudar o look-n-feel destes achors de paginação que você queira, modificando o seu CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging atual, página carousel_paging {outline: none; width:... 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 0 0 1px; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging atual {background: # 4D4D9B; color: # ffffff;}..

Bem! há um pequeno problema, porém, as âncoras de paginação se definido, então ele vai ficar sempre gerado depois que o componente do carrossel. Eu queria torná-lo dinâmico, bem como, mas apenas para manter o Script para soprar as proporções, eu decidi ignorá-lo.
Mas você sabe um pouco de JavaScript, você pode facilmente modificar o código de geração de paginação na classe MooCarousel para agradar às suas necessidades.

2. Personalizar os ícones de esquerda e direita

Você pode alterar o posicionamento, imagens ou qualquer propriedade displat dos botões esquerdo e direito simplesmente por brincar com o CSS. ser capaz de alterar as colocações dos buttoms Esquerda e Direita foi o motivo real para mim o meu direito Classe nosso carrossel.
Uma vez que esta classe MooCarousel, aceita o ID é um desses botões, você pode realmente colocar os botões em qualquer lugar da página, por favor ... não tem que ser na hierarquia de elementos, como no meu exemplo.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; width: 23px; height: 20px; float: left; cursor: pointer;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Personalizar Passos de slides

O que quero dizer MEUS PASSOS SLIDE Personalização?
A maioria dos Carrosséis deslize o total com a janela visível. Então, dizer que você tinha quatro itens (como no meu exemplo acima), ele coloca todos os quatro itens. Com este componente Carrossel, Você passa o número de slides eo tamanho do passo de sua escolha.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = número de slides, c_sss = tamanho do passo de slides

Além disso, na minha example1 eu calcuted o tamanho do passo slide, baseado na lógica em que, eu sei que número de itens, a largura em cada item e as margens que deram depois de cada item no meu CSS.

/ * Para bacanal 1 * /

var c1_w = 92; Largura Item / farra /

var c1_n = 10; / Número / Total de Itens farra Comparação

var c1_pp = Número 4 / / Comparação de perpage Itens bacanal

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = tamanho do passo de slides

var c1_ns = parseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / NS = número de slides

c1_sss + = c1_marginFactor / / sss = tamanho do passo de slides, 51 para as margens

Requisitos: Mootools 1.2

Veja o Demo | Download de Mootools carrossel com paginação Versão 1.0 (baixado 1991 vezes)

Mootools MooRating é um (cross browser, é claro como ele usa o poder da biblioteca MooTools) simples, leves e excelente solução baseada em classificação. Não é denominado como "Votos", simplesmente porque, a imagem classificação poderia ser como você escolher (eu tenho desde Estrelas, Bares e corações com o download, mas você pode criar sua própria variedade e só soltá-lo in).

Como ele se parece:

	Mootools Avaliação com imagens diferentes Exibir demonstração
	Mootools Avaliação com valores percentuais Exibir demonstração
	Mootools Avaliação com valores fracionários Exibir demonstração

Baixar Mootols Votos Script (Transferido 718 vezes)

Dados Avaliação: Número inteiro, Decimal ou Percentual
Atualmente, o script foi criado para mostrar os dados de classificação como valores inteiros (1,2,3,4,5), em casas decimais (1,24, 3,45 etc) ou em percentagem (12%, 55% etc). A escolha para mostrar dados em qualquer um dos formatos mencionados pode ser definido simplesmente mudando alguns valores bandeira dentro do javascript (moorating.js)
Basicamente, existem dois e dois pavilhões para brincar, para exibir valores no formato de sua escolha ...

var inpercent = false; / / Defina esse sinalizador para true, se você precisar de valores percentuais, para ser exibida
var isFractional = false / / Defina esta opção para verdadeiro, se você quiser valores fracionários como 1,24, 1,25, 4,56, em vez de 1,2 ... 5

E eu não acho que há qualquer explicação necessária para isso. Além disso. O script é muito simples. Se você conhece um pouco Javascripting, você pode modificar o script para obter qualquer tipo de valor exibido. Por exemplo, se você quisesse três casas decimais a serem exibidas ... apenas ajustar o script como abaixo ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = FormatNumber (x, 3);.} / / 2 é alterada para 3
else {moostartval [i] innerHTML = Math.round (x).;

Atualizando Valor Classificação:
I havent incomodado escrever os scripts de AJAX para atualizar o valor Ratings, porque eu sei da minha experiência que nem sempre ele pretende atualizar o CLASSIFICAÇÃO assim que a coisa taxas de usuário. Você é livre para fazer o que quiser com o valor nominal, atualizá-lo usando AJAX ou apresentá-lo ou definir um valor de campo oculto de formulário, que será apresentado com todo o formulário, etc

função updateRating (id, classificação) {
/ / Alert (ID + "," rating +);
/ / Faça o que for COM A CLASSIFICAÇÃO
}

Há função no javascript chamada "updateRating". Esta função foi passada a identificação da Div Rating, para identificar como a classificação (se houver mais que uma classificação na página) foi atualizado eo valor da avaliação [updateRating (id, classificação)]. Você poderia escolher o que quiser com esses valores, como mencionei anteriormente.

Imagem Avaliação: estrelas, corações, Barras ou qualquer coisa que você queira
Alterando a classificação para qualquer um dos tipos acima (estrelas, etc corações) é muito simples. Basta criar uma imagem semelhante à prevista e solte-o dentro Lembre-se, se você alterar o nome da imagem, não fazer as mudanças necessárias no arquivo CSS, veja abaixo.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; width: 84px; height: 20px; float: left; background: url ('stars.gif') repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; width: 84px; height: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') deixou 25px;}

A maioria dos widgets avaliações usar estrela e meia estrela de imagens com o mouse sobre os acontecimentos em cada estrela. Pontuações Moo usa uma imagem simples sprite como uma imagem de fundo para alcançar os efeitos desejados visuais com uma sobrecarga muito baixa.

Requisitos: Mootools 1.2
Baixar Mootols Votos Script (Transferido 718 vezes)

No Firefox ... às vezes você pode ter notado que o cursor começa a piscar na tela. Pode acontecer quando você clicar em qualquer elemento na página, uma divisão ou uma imagem etc Este cursor piscando na janela do navegador é realmente um recurso de acessibilidade do FireFox chamado de 'navegação acento circunflexo ". Esta característica permite / permite aos usuários selecionar o texto na página com o teclado (que normalmente tendem a fazer com o uso de nosso mouse).

Bem! Se não quiser quer esse recurso ... simples toque "F7" para alternar para falso e vice-versa (se você quiser ON). Você também pode digitar "about: config" na barra de endereços (tipo em "acento circunflexo" na caixa de filtro) e basta clicar duas vezes para alterar a opção "accessibility.browsewithcaret" de "verdade" (virar acento circunflexo navegar ON) para "false "(virar acento circunflexo navegar OFF)

Eu estava procurando um controle deslizante duplo preso (slider com dois botões, mínimo e máximo), utilizando mootools. Embora, eu encontrei uma barra bem feito poucos casal preso no fórum mootools, O único problema era que toda a força destes controles deslizantes tem o marcador de intervalo selecionado. Finalmente! Eu decidi criar o meu próprio. Bem! Eu usei o código original e modificá-lo para ter um fundo deslizante que indicou a faixa selecionada visualmente, como no meu exemplo abaixo. As áreas de azul indica a gama de valor escolhido.

Veja o Demo Versão 2.2 | Mootools download double Pinned Versão Slider 2,2 (Transferido 11752 vezes)

Você pode facilmente mudar a aparência do indicador de intervalo (em azul no exemplo acima), o botão slider, o rasto do slider, modificando o slider.css conforme necessário.

Não me mande um comentário se você achar que é útil.

Antes tínhamos que lidar com CSS para criar layouts de nossas páginas, alinhando algum conteúdo dentro de uma célula da tabela parecia jogar apenas criança. Basta definir o "alinhamento" ou propriedade "valign" da tabela para o alinhamento de sua escolha, pedaço de bolo!
Com layouts CSS, embora tenhamos "vertical-align" propriedade para os elementos, ele não parece ser tão simples como a "alinhar" ou "valign" propriedades. Para ser mais specifiic o "vertical-align" nunca parece resolver qualquer um dos seus problemas, especialmente se forem escrever uma peça de cross-browser CSS.

Sem o uso de tabelas HTML, o problema da centralização no objeto, seja uma imagem ou um texto dentro de uma divisão contendo, provavelmente tem sido cada UI / CSS pesadelo desenvolvedores em algum ponto. Este problema ainda extrapola as suas preocupações de alinhar, se o objeto a ser centralizado é de natureza dinâmica, isto é, quando a sua altura é variável (altura desconhecido).

Embora não há nenhuma solução conhecida para a frente que iria trabalhar em toda a gama de navegadores que temos de lidar, a solução que eu tentei chegar a faz parece funcionar em todos os navegadores poucos que eu tentei em (IE6, IE 7 , FF).

SOLUÇÃO:
Em navegadores como Mozilla, Opera e Safari, O estranho comportamento "vertical-align" propriedade pode ser trazido para os seus sentidos, simplesmente definindo o "display" de propriedade da divisão contendo a "table-cell" (display: table-cell) .

O problema ainda permanece com a família de navegadores IE, que, no entanto, parecem não entender o que com o "table-cell" propriedade e ignorantes como são, eles simplesmente ignorá-lo. A solução dada abaixo, embora simples, anúncios de alguns elementos mais para o seu DOM HTML para fazer as coisas acontecerem.

A CSS e HTML se parece com isso
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> visualizações: 3456 </ div>
</ Div>
</ Div>

O resultado se parece com isso: -

ver a demo aqui | baixar arquivos de origem (baixado 452 vezes)

TOP Alinhar CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> visualizações: 1234 </ div>
</ Div>
</ Div>

O resultado se parece com isso: -

Alinhar Parte Inferior CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> visualizações: 1234 </ div>
</ Div>
</ Div>

O resultado se parece com isso: -

ver a demo aqui | Faça o download aqui

Parece que as idades, desde que eu estava tentando encontrar uma solução razoável para este problema de alinhamento. Mas agora, com esta solução, me sinto em paz pouco.

Com uma esperança de que algum dia

• vertical-alinhamento propriedade em CSS funcionará como ele faz dentro de uma célula da tabela, sem ter que bater muito em torno do arbusto
• Pelo menos, estabelecendo margin-top: auto e margin-bottom: auto, dará como resultado mesmo com a margem esquerda ea margem direita conjunto para auto
• As guerras do navegador vai acabar algum dia.
• Haverá apenas um navegador para a ALL.

Faça o download do CSS e HTML da solução acima aqui (Transferido 452 vezes) .. de compreensibilidade, o CSS não está sendo otimizado

PS: E pelo jeito, são miniaturas de algumas fotos que tenham clicado ...