placeholder css snippet

 

customize placeholder color:

Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you’ll need vendor prefix CSS properties.

::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { color: red; }

/* custom placeholder color */
input::-webkit-input-placeholder {
color: rgba(255,255,255,0.8);
}

input:active::-webkit-input-placeholder ,
input:focus::-webkit-input-placeholder {
color: rgba(255,255,255,0.2);
}

input::-moz-placeholder {
color: rgba(255,255,255,0.8);
}

input:active::-moz-placeholder,
input:focus::-moz-placeholder {
color: rgba(255,255,255,0.2);
}

input:-ms-input-placeholder {
color: rgba(255,255,255,0.8);
}

input:active::-ms-input-placeholder ,
input:focus::-ms-input-placeholder {
color: rgba(255,255,255,0.2);
}

Advertisements

border: 10px solid rgba(0,0,0,0.3); box-shadow

border: 10px solid rgba(0,0,0,0.3);

The properties that can be set, are (in order):

  • border-width,
  • border-style, and
  • border-color.

It does not matter if one of the values above are missing, e.g. border:solid #ff0000; is allowed.

border-style

Value Description Play it
none Specifies no border Play it »
hidden The same as “none”, except in border conflict resolution for table elements Play it »
dotted Specifies a dotted border Play it »
dashed Specifies a dashed border Play it »
solid Specifies a solid border Play it »
double Specifies a double border Play it »
groove Specifies a 3D grooved border. The effect depends on the border-color value Play it »
ridge Specifies a 3D ridged border. The effect depends on the border-color value Play it »
inset Specifies a 3D inset border. The effect depends on the border-color value Play it »
outset Specifies a 3D outset border. The effect depends on the border-color value Play it »
inherit Specifies that the border style should be inherited from the parent element
  • border-style:dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style:dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style:dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style:dotted;
    • all four borders are dotted

color: #b14943;
cursor: pointer;
border-bottom: 1px dashed #b14943;

 

box-shadow:1px 1px 3px rgba(0,0,0,0.6);

box-shadow: h-shadow v-shadow blur spread color inset;

  • The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
  • The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
  • The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
  • The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
  • Color

Inner Shadow

.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

One-Side Only

Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.

.one-edge-shadow {
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;
}
reference
http://css-tricks.com/snippets/css/css-box-shadow/

overflow: hidden

four values for the overflow property: visible (default)hiddenscroll, and auto.

Generally, you shouldn’t be setting static heights on boxes with web text in them anyway, so it shouldn’t come up.

Hidden

literally hides any content that extends beyond the box.

This is particularly useful in use with dynamic content and the possibility of an overflow causing serious layout problems. However, bear in mind that content that is hidden in this way is utterly inaccessible (short of viewing the source).

Scroll

Setting the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content.

Of note with this value is that you get BOTH horizontal and vertical scrollbars no matter what, even if the content requires only one or the other.

Auto

Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don’t need them.

Float Clearing

One more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn’t clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn’t declared. Like this:

via http://css-tricks.com/the-css-overflow-property/

Collapsing margins

rgba(0,0,0,0.6)

The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency.

This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through.

CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA:

  • opacity level from 0 (completely transparent) to 1 (completely opaque).
  • first three values are red, green and blue. You can specify these 0-255 or 0%-100%.
h1 {
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
}

Heading with no transparency

Heading with 50% opacity on the element
h1 {
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
	opacity: 0.5;
}
Heading with 50% opacity

50% opacity on just the background colour

h1 {
	color: rgb(0, 0, 0);
	background-color: rgba(255, 255, 255, 0.5);
}
Heading with 50% opacity on just the background

50% opacity on just the foreground colour

h1 {
	color: rgba(0, 0, 0, 0.5);
	background-color: rgb(255, 255, 255);
}
Heading with 50% opacity on just the foreground
more
http://24ways.org/2009/working-with-rgba-colour/

.classA.classB 和.classA .ClassB的区别

Difference between .classA.classB and .classA .classB in CSS?

.classA.classB refers to an element that has both classes A and B (class="classA classB"); whereas .classA .classB refers to an element with class="classB" descended from an element with class="classA".

.classA .classB {
  border: 1px solid; }

It would work, for example, on:

<div class="classA">
  <p class="classB">asdf</p>
</div>

This one, however, targets any type of element that is both class “classA”, as well as class “classB”. This type of style is less frequently seen, but still useful in some circumstances.

.classA.classB {
  border: 1px solid; }

This would apply to this example:

<p class="classA classB">asdf</p>

However, it would have no effect on the following:

<p class="classA">fail</p>
<p class="classB">fail</p>

Note that when an HTML element has multiple classes, they are separated by spaces.

<style>
.classa.classb {
background:green;
border: 1px solid blue ;
}
.classa   .classb {
background:yellow;
border: 1px solid black ;
}
</style>

<input class=”classa classb” type=”text” />

<div class=”classa”><input class=”classb” type=”text” /></div>

084F360282624DF78F97458DA34E386B

在 CSS 中,类选择器以一个点号显示:

.center {text-align: center}

.classA.classB指的是一个元素,同时满足.classA和classB

<div></div>

.classA .classB指的是classB内嵌于classA

<div>

<div>

</div>

</div>

ID and Class Selector

As we covered above, you can target elements by a combination of ID and class.

<h1 id="one" class="two">This Should Be Red</h1>
#one.two { color: red; }

Double Class Selector

Target an element that has all of multiple classes. Shown below with two classes, but not limited to two.

<h1 class="three four">Double Class</h1>
.three.four { color: red; }

Multiples

We aren’t limited to only two here, we can combine as many classes and IDs into a single selector as we want.

.snippet#header.code.red { color: red; }

Although bear in mind that’s getting a little ridiculous =)

via http://css-tricks.com/multiple-class-id-selectors/

Merge two css class for div element

Here ‘ClassA > div’ and ‘classB > div’ have the same properties. So i need to make this as single class to apply to div element.

.classA {
 height: 500px;
 width: 800px;
}
.classB {
 height: 800px;
}
.classB > div {
 xxxx
 yyyy
}
.classA > div {
 xxxx
 yyyy
}
solution:
Use a comma:

.classA > div, .classB > div {
 xxxx
 yyyy
}
 

CSS – style

Layout is a ‘container system’. As such it has no ‘style’ of its own.
But you can add any theme-classes you want. For example, to apply the ui-widget style from themeroller, just add the classname to your pane
element(s)…

<div class=”ui-layout-west  ui-widget“>

The UI CSS Framework icon-set DOES have icons suitable for Layout, including a ‘gripper’ and arrows for the resizer/toggler elements, plus arrows, plus/minus, pin/unpin and other useful icons for buttons.
Just add a span or other element and apply the appropriate class and/ or CSS to it.
<span class=”ui-icon-pin-s“></span>

Masonry Pluginminimizes vertical gaps between the images

<img src=”smiley.gif” alt=”Smiley face”> //The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

ul.iw_thumbs li{

    float:left;
    margin:5px;
}
.iw_wrapper{

    width:70%;
    margin:30px auto 100px auto;
    position:relative;
}
  • margin: 10px 20px;
    top and bottom margins are 10px, right and left margins are 20px.
  • margin: 10px 20px 30px;
    top margin is 10px, right and left margins are 20px, bottom margin is 30px.
  • margin: 10px 20px 30px 40px;
    top margin is 10px, right margin is 20px, bottom margin is 30px, left margin is 40px.

The images will have a thick white border and some box shadow:

1
2
3
4
5
6
7
8
9
10
11
12
13
ul.iw_thumbs li img{
    border:7px solid #fff;
    cursor:pointer;
    position:relative;
    -moz-box-shadow:1px 1px 1px #aaa;
    -webkit-box-shadow:1px 1px 1px #aaa;
    box-shadow:1px 1px 1px #aaa;
}
ul.iw_thumbs li img:hover{
    -moz-box-shadow:1px 1px 7px #777;
    -webkit-box-shadow:1px 1px 7px #777;
    box-shadow:1px 1px 7px #777;
}

give the whole wall a scattered look 

add some chaos to the list elements and the images. We will adjust the margin of some list elements by selecting specific children.

  • We take the first list element and we add a margin-left of 50 px:

ul.iw_thumbs li:nth-child(1){

    margin-left:50px;
}
  • Then we take all the even list elements and give them a different top margin:
1
2
3
ul.iw_thumbs li:nth-child(even){
    margin-top:30px;
}
  • All multiples of 3 will have a left margin of 20 px:
1
2
3
ul.iw_thumbs li:nth-child(3n){
    margin-left:20px;
}
  • Now we will play with the heights of the images.
    •  We also want to make the images a little bit smaller or bigger because we want to animate them to the height of the ribbon when we click on them. So this will add an interesting effect, since some images will grow and some will shrink:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul.iw_thumbs li:nth-child(even) img{
    height:20px;
}
ul.iw_thumbs li:nth-child(odd) img{
    height:40px;
}
ul.iw_thumbs li:nth-child(5n) img{
    height:70px;
}
ul.iw_thumbs li:nth-child(6n) img{
    height:110px;
}
ul.iw_thumbs li:nth-child(7n) img{
    height:20px;
}
  • The ribbon will be a fixed element that will come sliding out from the left or the right side depending on where the thumbnail is positioned. The width is 0 initially and we will animate it to 100%.
1
2
3
4
5
6
7
8
9
10
11
12
.iw_ribbon{
    position:fixed;
    height:126px;
    width:0px;
    left:0px;
    top:0px;
    background:#000;
    opacity:0.8;
    z-index:10;
    overflow:hidden;
    display:none;
}
  • When we click on a thumbnail while we are in the “ribbon mode”, we want the big image to appear inside of the ribbon and then we’ll expand the ribbon in order to reveal it. So we will dynamically add the image into our ribbon and apply the following style:
1
2
3
4
5
6
.iw_ribbon img{
    position:absolute;
    top:50%;
    left:50%;
    border:7px solid #fff;
}

We want the image to be centered, so we add a top and left of 50% and define the negative margins dynamically once we know the size of the image. The margins need to be the negative half of the width and height of the image.

And finally, we define the loading span style which is an element that we will add dynamically into the list element in order to indicate that the big image is loading:

.iw_loading{

    background: #fff url(../images/loader.gif) no-repeat center center;
    width:28px;
    height:28px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10000;
    margin: -14px 0px 0px -14px;
    opacity:0.8;
}

The default number of images per wall are the total number divided by four since we have four walls to spread them on.

The gallery starts by looking at the first image which will be centered in the viewport. With a very large screen, we will be able to see the neighboring images as well, depending on the wall size of course, When we turn fully, the walls will be reset and we’ll again have only the main wall:

different handling of 3D transforms in the browsers and of course the performance

performance suffers when adding something like a box shadow, so we have stripped the demos down to their bare style and not added too much fanciness.

CSS CLIP PROPERTY

schema-clip

.my-element {

    position: absolute;
    clip: rect(10px  350px  170px  0); /* IE4 to IE7 */
    clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
}
clip: rect(40px, 260px, 150px, 80px);
schema
  • The rect() function accepts auto as a value for each one of the four parameters. Basically it means “100%”. Let’s say you clip something to rect(0, 50px, 50px, 0) and want to display it in full size (100×100 let’s say). You could either do rect(0, 100px, 100px, 0) or rect(0, auto, auto, 0).
  •  since the rect() function requires length values for each parameter, it means it’s animatable either with CSS transitions or CSS animations. This is excellent news to make sweet effects. Of course you can’t animate to auto since it’s not an integer.
  • percentage values for the rect() function are not supported. It’s too bad because it would make responsive clip stuff easier.

CSS + HTML

html 和css都是标记语言,现在用他们来分别进行网页结构设计,网页风格设计。
<head>
<style>
.mystyle1
{
color: green;
background-color: orange;
}
</style>
</head>

用户自定义的样式的名称不属于任何html标记。 我们可以使用属性"class"设置标记的样式。
示例1:
<font class=mystyle1> 我的风格 </font>
结果1: 我的风格 

示例2:
<a href="index.php" class=mystyle1> 我的风格 </a>
结果2: 我的风格 

大致上有三种方法来设置html标记的样式:
a) 内置
b) 内部
c) 外部的CSS
内嵌样式
在html标记中这种样式的属性值为内置。
示例: <font style="color: red; background-color: orange;"> 测试字体 </font>
结果: 测试字体

内部样式
我们可以使用它来定义head标记的样式。
在head标记中我们定义的样式就像示例中给出的一样。
内部样式样式有三种方法可以使用:
普遍, 
标识符, 
用户定义. 
1。我想让所有相似的html标记有相同的样式。例如: 我想让每个<font>标记中的文本内容加粗?
<head>
<style>
a
{
color: green;
}
</style>
</head>
如果像这样使用内部样式,则样式将在整个页面的该标签中生效。即页面中的所有的"a"标记将应该该样式。
2,全局样式时,它将为所有的标记类型设置同样的样式。但是在大多数情况下我们想要相同的标记类型在不同的位置有不同的样式。
<head>
<style>
a#test1
{
color: red;
background-color: orange;
}
a#test2
{
color: green;
background-color: yellow;
}
</style>
</head>

如果我们在标识符中使用内部样式时,我们需要为样式设置ID,这样才会有效。

示例1:
<a href=”index.php” id=test1> 指数 </a>
结果1: 指数 

示例2:
<a href=”index.php” id=test2> 指数 </a>
结果2: 指数

我该如何创建外部样式表文件?

我们把以下的样式放在文本文件中,例如:mystyle.css
<style>
.mystyle1
{
color: green;
background-color: orange;
}
</style>

在html中如何设置背景图片重复?

a)repeat:这个值说明背景图片在两个方向上重复
b)repeat-x:这个值说明背景图片仅仅在垂直方向上重复
c)repeat-y:这个值说明背景图片仅仅在水平方向上重复
d)no-repeat:这个值说明背景图片没有重复
如何产生onMouseover效果?
当鼠标在链接或者背景上时,如何让它们的颜色发生改变?

步骤1:
在head段落中添加文本要改变的样式,具体如下,
<head>
<style>
/*这是怎样的文字会在鼠标滑过*/
.colc{
font-family: san-serif;
color: #9EFF36;
}

/*这是如何看待文本将鼠标。注意:”悬停”是最最重要的变化这里*/
.colc:hover
{
font-family: san-serif;
color: #456745;
}
</style>
</head>

步骤2:
当鼠标在文本上方时,设置文本要出现的样式
例如:
<a href=””  class=”colc”> 这是将鼠标移动到文字</a>

注意:在这里我们使用标记”class”来设置样式。样式名称”将创建在header段落中。
—————————–

要让背景颜色发生改变,就像上面解释的一样,在样式标记中添加”background-color”属性。
例如:形成的样式就是
.colc2{
font-family: san-serif;
color: #9EFF36;
}

/*这是如何看待文本将鼠标。注意:”悬停”是最最重要的变化这里*/
.colc2:hover
{
background-color: #245250;
}

把这种样式设置到html标记中
<a href=””  class=”colc”> 这是OnMouseOver效应 </a>

水平线: <hr>
这是用于画出新的水平线的特殊标记。
这不需要结束标记。


This tag has the attribute 这个标记通过使用属性”width”来说明线的宽度。
<hr width=60%> 是用于定义以下的线


在一定的时间间隔后,我想让网页自动重定向?

为了进行页面重新定向,我们应当使用在html中使用head标记内的Meta标记。 推荐刷新的时间大于5秒,这是因为我们要考虑页面加载的时间。

例如:

<meta http-equiv=”refresh” content=”5; url=http://www.hscripts.com”>

这个代码将用于5秒之后重新定向你的网页到http://www.hscripts.com。

  • 属性 http-equiv=”refresh”是用于请求刷新页面。
  • 属性content=”5; URL=http://www.hscripts.com”是用于以秒来设置事件间隔,在这之后,页面重新定向到目标页面。
  • 在’url=’之后你不能使用分号。
  • 使用这个meta标记在一定的时间间隔后会自动重新定向到目标页面。为了确保重新定向到预置页面,可以编辑属性 “content“,来设置合适的时间值和目标网址。这将在所有扩展和服务器端语言(如php, jsp, asp等)中起作用。

我想让在页面上的一小部分在每隔一定的时间间隔后会加载,该怎么做?

页面的内容或者小部分需要每隔一定时间就动态更新。加载全部页面是不明智的。我们就通过嵌入框架来完成。

<html>
<head>
<meta http-equiv=”Refresh” content=”5″>
</head>
<body bgcolor=#faa9aa>
2061816660</body>
</html>

通过使用内联框架,把动态页面设置成我们的主页。在这里我们要使用表格和嵌入页面设置成网站上表格的一列。

<html>
<body>
这是内联框架的测试页面。在以下的框架中你只能看到内容,在每隔5秒,内联框架就会加载。 <br><br>

</body>
</html>

我想让网页在每几秒就重新载入?
我该如何让html页面自动刷新?

生活在西班牙

自己动手丰衣足食

BlueAsteroid

Just another WordPress.com site

Jing's Blog

Just another WordPress.com site

Start from here......

我的心情魔方

天才遠私廚

希望能做一個分享各種資訊的好地方

语义噪声

西瓜大丸子汤的博客

笑对人生,傲立寰宇

Just another WordPress.com site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision

datarazzi

Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness

槑烎

1,2,∞

Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web