GyanCode

Thursday, 30 March 2017

Height:100vh doesn't work correctly with content in the div

<!DOCTYPE html>

<head>

<title>Height:100vh doesn't work correctly with content in the div</title>

</head>

.intro { color: #fff;height: 100vh; background: url('yourimage.jpg') no-repeat center center; background-size: cover; position: absolute;bottom: 2em; }

p.hello {margin: 30px; }

.page1 {color: #fff; height: 100vh; background: beige; }

.page2 {color: #fff; height: 100vh; background: black; }

</style>

<body>

Intro text is coming soon!

</p>

<p>

Buttons coming here.

</p>

</div>

<p>Tekst test</p>

</div>

<p>Tekst test.</p>

</div>

</body>

</html>

Wednesday, 29 March 2017

Height for Full Screen Div?

I have a DIV element that needs to fill the entire screen until the user scrolls and reveals the content. So essentially remain at the viewports height.

Here is what I did and it works, but it’s only compatible with newer browsers.

.section-full {
height:100vh;
min-height:100vh;

}

Tuesday, 28 March 2017

Changing the Font to All Caps with CSS

While text in general is hard to read when written in all caps – and considered the electronic version of yelling – using CAPS for emphasize is a handy tool.

Headers are a place where capitalization is frequently used. And to assure that your header is displayed uniformly throughout the site without having to worry about actually writing in all caps, just use CSS:

h1 {
text-transform: uppercase;
}

With this, everything that has the h1 tag applied, WILL APPEAR IN ALL CAPS.

Another interesting text-transformation property is "capitalize"

h1 {text-transform: capitalize;}

With This, All Your Words Will Begin With A Capital Letter!

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; }

Tuesday, 14 March 2017

Print Jquery

If you want print your page
use this script in web page...

<script type="text/javascript">
window.print();
</script>

Sunday, 12 March 2017

Fixed header and footer

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed header and footer</title>
<style type="text/css">
html, body { margin:0; padding:0; font-family: verdana; font-size: 13px;}
html, body { height:100%;}
#top-bar {position:fixed; top:0px;left:0px;height:50px;width:100%; z-index:999; overflow:hidden;}
#topbar-inner, #footer-inner { background: #03bf95; text-align: center; color: #FFF;font-size: 18px; padding: 9px;}
#footer { position:fixed; bottom:0; width:100%; height:40px; z-index:999;}
.inner { padding:50px 0; position:relative;}
p { margin:0 0 1em; font-size: 13px;}
#contain-all { width: 60%; margin: 0px auto; padding: 20px;}
</style>
</head>
<body>
<div id="outer">
<div id="contain-all">
    <div class="inner">
      <p>This is an experimental layout and untested in a real situation but preliminary
        results look good. <strong>Note</strong> that opera 10.6 has introduced a bug where if the page has been scrolled and then refresh is clicked the fixed elements will disappear. </p>
      <p>The header and footer need to be a fixed height and are therefore not suited to large amounts of fluid content.</p>
      <p>Good browsers get normal fixed positioning but ie6 and under make use of a bug in ie6 where children of elements that have overflow defined behave as though they are fixed.</p>
      <p>some text to wrap : some text to wrap : some text to cause scrolling :
        : some text to wrap : some text to wrap : some text to cause scrolling :
        : some text to wrap : some text to wrap : some text to cause scrolling :
        : some text to wrap : some text to wrap : some text to cause scrolling :
        : some text to wrap : some text to wrap : some text to cause scrolling :
        : some text to wrap : some text to wrap : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>some text to cause scrolling : </p>
      <p>Last bit of text</p>
    </div>
</div>
</div>
<div id="top-bar">
<div id="topbar-inner">Fixed Top & bottom</div>
</div>
<div id="footer">
<div id="footer-inner"> Fixed footer </div>
</div>
</body>
</html>

Wednesday, 8 March 2017

Animate "height" with CSS Transitions

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animate "height" with CSS Transitions </title>
</head>
<style type="text/css">
body{font-family: verdana; font-size: 14px; text-align: center;}
.accordion {display: inline-block;text-align: left; margin: 1%; width: 70%;}
.accordion:hover .accordion-content { max-height: 300px;}
.accordion-content { -webkit-transition: max-height 1s; -moz-transition: max-height 1s; -ms-transition: max-height 1s; -o-transition: max-height 1s; transition: max-height 1s; background: #ffb1b1; overflow: hidden; max-height: 0;}
.accordion-inner { padding: 0 15px;}
.accordion-toggle { -webkit-transition: background .1s linear; -moz-transition: background .1s linear; -ms-transition: background .1s linear; -o-transition: background .1s linear; transition: background .1s linear; background:#de0000;
border-radius: 3px; color: #fff; display: block; font-size: 24px; margin: 0 0 10px; padding: 10px; text-align: center;
text-decoration: none;}
.accordion-toggle:hover { background:#a20000;}

    </style>

<body>
<div class="accordion">

<a href="#" class="accordion-toggle">Hover for height animate</a>
<div class="accordion-content">
    <div class="accordion-inner">
      <p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
      <p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
    </div>
</div>
</div>

</body>
</html>

Gyancode

A free library of HTML, CSS, JS

Search This Blog

Thursday, 30 March 2017

Height:100vh doesn't work correctly with content in the div

Wednesday, 29 March 2017

Height for Full Screen Div?

Tuesday, 28 March 2017

Changing the Font to All Caps with CSS

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:

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

Wednesday, 22 March 2017

How can i add label in Select Option in HTML

You can use this html code in your webpage.

Friday, 17 March 2017

Box rotate with css transforms

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

Tuesday, 14 March 2017

Print Jquery

Sunday, 12 March 2017

Fixed header and footer

Wednesday, 8 March 2017

Animate "height" with CSS Transitions