GyanCode

Tuesday 28 March 2017

The 3 ways to insert CSS into your web pages

1. With an external file that you link to in your web page:

2. By creating a CSS block in the web page itself; typically inserted at the top of the web page in between the <head> and </head> tags:

<head>
   <style type="text/css">
      p { padding-bottom: 12px; }
   </style>
</head>

3. By inserting the CSS code right on the tag itself:

<p style="padding-bottom:12px;">Your Text</p>

Wednesday 22 March 2017

How can i add label in Select Option in HTML

You can use this html code in your webpage.

<select class="board-selector">
<option label="Create a Board">Create a Board</option>
<option label="View all Boards">View all Boards</option>
<optgroup label="Recent Boards">
<option label="awesome" selected="selected">awesome</option>
</optgroup>
</select>

Friday 17 March 2017

Box rotate with css transforms

<div class="original">
<div class="spin">
    <figure class="box box-1">Box 1</figure>
</div>
</div>

<div class="original">
<div class="spin">
    <figure class="box box-2">Box 2</figure>
</div>
</div>
<style>
body {
color: #fff;
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
margin: 12px 15px;
}
.original,
.box {
border-radius: 6px;
}
.original {
background: #eaeaed;
border: 1px dashed #cecfd5;
float: left;
margin: 12px 15px;
}
.box {
background: #2db34a;
height: 95px;
line-height: 95px;
text-align: center;
width: 95px;
}
.spin {
cursor: pointer;
transform-style: preserve-3d;
}
.spin:hover {
    animation: spin 5s linear infinite;
}
@keyframes spin {
0% {
    transform: rotateY(0deg);
}
100% {
    transform: rotateY(360deg);
}
}
.box-1 {
transform: rotate(20deg);
}
.box-2 {
transform: rotate(-55deg);
}
</style>

Why can't I use background image and color together?

If you tring to do is to show both color & image you can use this css body tag

body{ width: 100%; height: 100%; margin: 0; background: url(../images/bg_new.png) #f6f6f6 repeat right top !important; }

Gyancode

A free library of HTML, CSS, JS

Search This Blog