Showing posts with label divs. Show all posts
Showing posts with label divs. Show all posts

Wednesday, May 25, 2011

Krazy Korners using CSS and HTML



Create beautiful CSS DIV boxes for your widget or content containers for an eye catching appearance to your readers. Here is a selection of what CSS can do for your containers; just change the divs to any color you wish and enjoy.



Steps for this tutorial:

1. Log into your Blogger dashboard and navigate to Design > Edit HTML.

2. Insert the following CSS code into your head section.

For The 3D Rasied Example


For The 3D Inset Example


For The Chamfer Example


For The Square Cutout Border Example


For Curved Cutout Example

For The NEW! Flared Shape Example

For The NEW! Pillar Shape Example

For The Barrel Example


3. Next, add a new HTML/JavaScript gadget under Page Elements and add the following HTML code.

For The 3D Rasied Example


For The 3D Inset Example


For The Chamfer Example


For The Square Cutout Border Example


For Curved Cutout Example

For The NEW! Flared Shape Example

For The NEW! Pillar Shape Example

For The Barrel Example

Note: Change content within DIV containers to what you would like to appear in it.
By at No comments:
Labels: , , , ,

Friday, March 4, 2011

HTML+TIME DIV Background Hover Color Change for Blogger


preview-blogger

CSS Code Snippet
This section code should be inserted before the closing head tag.



HTML Code Snippet
This section code should be inserted where you want the output to appear.
By at No comments:
Labels: , , ,

Friday, June 18, 2010

Page crease for DIV boxes using CSS

This tutorial is will produce those page crease containers you usually see on most blogs/site. This tutorial allows you to do just that to any DIV elements located anywhere on your blog/site. It does so by using relative positioning to slightly offset a DIV to the bottom right while using it's background image (in this case, the creased image) as its border of the outer DIV. Let's get started, but first and foremost, always remember to back-up your current existent template in case it doesn't turn out as expected.



Click here to view a demo
(Although the demo is not showing the border, when implemented in Blogger, border will be visible.)

Download the entire zip file
(Zip files include entire codings along with images needed to implement this tutorial.)

CSS SECTION CODE
(Section code below should be placed in the CSS part of your template, located right before your closing head tag.)
<style type="text/css">
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}

.curlycontainer .innerdiv{
background: transparent url(media/brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
</style>
HTML SECTION CODE
(section code below should be placed in your desired location but in your HTML section code, you can also use "Add a Gadget" under Page Elements and move it to your desired location.)
<div class="curlycontainer">
<div class="innerdiv">
<b>Some title</b> <br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here.
</div>
</div>
NOTE: Remember that you can always modify the CSS part of the section code to your desired styles.

Questions or Comments? Just ask or leave a note, I'd be glad to help you out or take any advice.
By at 1 comment:
Labels: , , , ,

Friday, June 11, 2010

CSS DIV Arrow Comment Box

Add a simple arrow comment box using css and an "arrow" image and sub texts right beneath it. It's a nice interface to use for your blog's comment boxes, for example. The arrow image is being used as a background image, meaning you can control how much of it is shown by adjusting it's horizontal and vertical positions.

/ demo / - / download /



CSS Code
.commentbox{
background-color: #ececec;
width: 450px;
padding: 10px;
}

.commentfooter{
background: url(media/arrow.gif) 20px 0 no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
padding-left: 58px;
padding-top: 1px;
margin-bottom: 2em;
font-size: 90%;
color: #4A4A4A;
}
HTML Code
<div class="commentbox">
This is some comment.<br />This is some comment.<br />This is some comment.
</div>
<div class="commentfooter">Posted by Author on 05/10, 03:39 AM</div>
By at 2 comments:
Labels: , , ,

Saturday, June 5, 2010

CSS DIV boxes with gradient shadow

This example integrates javascript with CSS to create a gradient shadow effect for containers or elements on your page with a customizable shadow depth and coloring. To enable the effect; simply add the "shadow" class name tags to your desired element.

[ download files ] - [ demo ]



CSS Code
<style type="text/css">

.shadow{ border:1px solid silver; font:10pt arial; position:relative; display:inline; background:white; z-index:100 }

.shadow_inner{ overflow:hidden; position:absolute; top: -1000px; filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/ opacity:0.1; /*firefox 1.5 opacity*/ -moz-opacity:0.1; /*mozilla opacity*/ -khtml-opacity:0.1; /*opacity*/ z-index:10 }

</style>

<script type="text/javascript">

var gradientshadow={} gradientshadow.depth=6 //Depth of shadow in pixels gradientshadow.containers=[]
gradientshadow.create=function(){ var a = document.all ? document.all : document.getElementsByTagName('*') for (var i = 0;i < a.length;i++) { if (a[i].className == "shadow") { for (var x=0; x<gradientshadow.depth; x++){ var newSd = document.createElement("DIV") newSd.className = "shadow_inner" newSd.id="shadow"+gradientshadow.containers.length+"_"+x //Each shadow DIV has an id of "shadowL_X" (L=index of target element, X=index of shadow (depth) if (a[i].getAttribute("rel")) newSd.style.background = a[i].getAttribute("rel") else newSd.style.background = "black" //default shadow color if none specified document.body.appendChild(newSd) } gradientshadow.containers[gradientshadow.containers.length]=a[i] } } gradientshadow.position() window.onresize=function(){ gradientshadow.position() } }

gradientshadow.position=function(){ if (gradientshadow.containers.length>0){ for (var i=0; i<gradientshadow.containers.length; i++){ for (var x=0; x<gradientshadow.depth; x++){ var shadowdiv=document.getElementById("shadow"+i+"_"+x) shadowdiv.style.width = gradientshadow.containers[i].offsetWidth + "px" shadowdiv.style.height = gradientshadow.containers[i].offsetHeight + "px" shadowdiv.style.left = gradientshadow.containers[i].offsetLeft + x + "px" shadowdiv.style.top = gradientshadow.containers[i].offsetTop + x + "px" } } } }

if (window.addEventListener) window.addEventListener("load", gradientshadow.create, false) else if (window.attachEvent) window.attachEvent("onload", gradientshadow.create) else if (document.getElementById) window.onload=gradientshadow.create

</script>
HTML Code
<p class="shadow" style="display: block" rel="red">This is some paragraph.<br />Set display="block" inside it.<br />This is some paragraph.</p>

<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" class="shadow" rel="blue" /><br />

<p><a href="http://www.blogspotvision.com" class="shadow" rel="green">Some link</a></p>
By at 2 comments:
Labels: , , ,

Friday, June 4, 2010

CSS DIV boxes with drop shadows

This example shows how to add a drop shadow style to any container element using CSS. It does this by wrapping the desired content in a DIV with its background color set to a color of the desired color for the shadow. Another DIV is set for your content and is shifted slightly upwards and to the left to expose the shadow. The "master" DIV wraps it all up but is shifted to the right and downwards, returning the entire markup to it's original page position.

IE6 is not compatible with this example, but you can apply conditional HTML to hide the effect in that browser. In contrast, IE7 is compatible with this example for finally updating to proper CSS.

Note: If you will be using an image for your content, you should give ".shadowcontainer" an explicit height, reflecting that of the image's for fixed and set location when viewed.



CSS Code
<![if !IE 6]>
.shiftcontainer{
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px; /*Number should match -top shadow depth below*/
}

.shadowcontainer{
width: 300px; /* container width*/
background-color: #d1cfd0;
}

.shadowcontainer .innerdiv{
/* Add container height here if desired */
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -5px; /*shadow depth*/
top: -5px; /*shadow depth*/
}
<![endif]>
HTML Code
<div class="shiftcontainer">
<div class="shadowcontainer">
<div class="innerdiv">
<b>Your Header</b> <br />
Your content here. Your content here.<br />
Your content here. Your content here.<br />
Your content here. Your content here.<br />
Your content here. Your content here.
</div>
</div>
</div>
By at 1 comment:
Labels: , , ,
Subscribe to: Posts (Atom)