how to create this type of CSS div box[![enter image description here][1]][1]
[1]:
Here's what I came up with:
<!DOCTYPE html>
<html>
<head>
<title>Gradient Div</title>
</head>
<style>
div.Outer
{
width: 200px;
border: 2px solid #00df82;
border-radius: 5px;
font-weight: bold;
padding-left: 15px;
font-family: sans-serif;
}
div.Inner
{
position: absolute;
z-index: 1;
left: 155px;
top: 8px;
width: 70px;
height: 54px;
border-radius: 25px 5px 5px 25px;
background-image: linear-gradient(#00df82, #34ef52);
}
#para
{
text-align: center;
font-family: sans-serif;
color: white;
}
</style>
<body>
<div class="Outer">
<p>Full Filled</p>
<div class="Inner">
<p id="para">95</p>
</div>
</div>
</body>
</html>
I've answered this to the best of my CSS knowledge. There may be better ways of solving this problem. Here is an explanation of the parts:
position: absolute; allows HTML elements to be placed anywhere on the HTML page.
z-index: 1; specifies in what order HTML elements will be displayed along the z-axis. For example, if an HTML element has a z-index of 0 and another HTML element has a z-index of 1, the HTML element with a z-index of 1 will be drawn on-top of the HTML element with a z-index of 0.
Related
I'm banging my head against the HTML/CSS wall. I am trying to put a colored title at the top of a DIV with rounded corners. The background of the title bleeds out of the bounds of the rounded corners of the containing DIV.
I've tried applying a background-clip:padding-box to both the DIV and the H1's style with no effect. I've tried applying a border-radius to the H1, but since the height is different, the corners don't line up for the desired effect.
Any ideas what I'm missing here?
<!DOCTYPE html>
<html>
<head>
<title>Rounded Edges With Background</title>
<style>
body,
html {
width: 100%;
height: 100%;
}
.outer_box {
width: 500px;
background: #fff;
border: 2px solid #000;
border-radius: 25px;
}
.title {
width: 100%;
background: #00f;
color: #fff;
margin-top:0;
background-clip: padding-box;
}
</style>
</head>
<body>
<div class="outer_box">
<h1 class="title">Here's a title</h1>
<p>Here's some content.</p>
</div>
</body>
</html>
(also in a fiddle)
check this code, is this waht are you looking for ?
the overflow: hidden hides whatever passes the .outer_box borders
and padding: 10px; just to makes it look nice.
<!DOCTYPE html>
<html>
<head>
<title>Rounded Edges With Background</title>
<style>
body,
html {
width: 100%;
height: 100%;
}
.outer_box {
width: 500px;
background: #fff;
border: 2px solid #000;
border-radius: 25px;
overflow: hidden;
}
.title {
width: 100%;
background: #00f;
color: #fff;
margin-top:0;
background-clip: padding-box;
padding: 10px;
}
</style>
</head>
<body>
<div class="outer_box">
<h1 class="title">Here's a title</h1>
<p>Here's some content.</p>
</div>
</body>
</html>
you should add the property
overflow:hidden
to the outer_box. Basically what it does is it hides whatever is past the border. You should also add some padding to the title.
You have to make the h1 tag inside the outer_box rounded border to.
.outer_box h1 {
border-radius: 25px;
}
How to blur the div below the section thus applying that effect to the section and its content( would like to get OSX Yosemite blur effect without background image ).
Here is the markup.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
section{
display: table;
position: relative;
background: rgba(255,0,0,0.5);
width: 300px;
height: 100px;
}
section h1{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}
div{
position: absolute;
top: 30px;
left: 10px;
width: 300px;
height: 100px;
background: rgba(255,255,255,0.5);
filter: blur(4px);
}
</style>
</head>
<body>
<section>
<h1>There is some content</h1>
</section>
<div></div>
</body>
</html>
I see that you've got filter: blur. I did some testing with that as well but couldn't get it to work at all in firefox 31. Seems that text-shadow should accomplish something similar.
JSFiddle
.blurred {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
I want to make a donation box as a div, but I want it to move with the page as you scroll without changing its position or staying in its old place (i.e. position: fixed). I gave the div positioning yet it wont move for some reason, it just gets pushed away when a page gets longer.
<head>
<style>
#donationbutton {
color: blue;
background-color: yellow;
font-weight: bold;
width: 100px;
padding:10px;
text-align: center;
border: 2px solid black;
border-radius: 25px;
position: relative;
}
</style>
</head>
<body>
<a href="something" style="text-decoration: none;">
<div id="donationbutton">
DONATE
</div>
</a>
</body>
`
you need to use position: fixed instead of position: relative if you want it to stay in place
#donationbutton {
color: blue;
background-color: yellow;
font-weight: bold;
width: 100px;
padding:10px;
text-align: center;
border: 2px solid black;
border-radius: 25px;
position: fixed; <---------
}
EXAMPLE
Just understand that position: fixed removes the element from the flow of the document so it won't behave like a normal block element
position: fixed
is what youre looking for: http://jsfiddle.net/swm53ran/69/
Can you make round cap underlines (as in the above image) with CSS? How?
Is there a way to do this with border-bottom? border-radius produces this stylish effect instead:
EDIT: I missunderstood what hpique wated, but this should work:
#test {
font-size: 50px;
background: transparent;
border-radius: 10px;
height: 10px;
width: 255px;
box-shadow: 0 55px 0 0 #000;
font-family: sans-serif;
}
<div id="test">Hello world</div>
Basically I'm putting the text on a div, and the box shadow will be of the same size as the set height and width for that div, just play with the height/width and you should get what you want...
JSBin Demo
Screenshot from the Demo:
Yes, it’s possible. Add a block element using :after with no content and give it desired width/height like so:
h1:after {
content:"";
float:left;
background:green;
width:100%;
height:6px;
border-radius: 3px;
}
Fiddle here: https://jsfiddle.net/toqL0agq/1/
I tried doing this same thing with the accepted answer, but found I was still getting the undesired result shown in the question. You can achieve this with a psuedo class:
HTML:
<span class="kicker">Hello World</span>
CSS:
.kicker {
font-size: 1rem;
position: relative;
&:after {
content: '';
display: block;
width: 100%;
height: 6px;
border-radius: 6px;
background: #000;
position: absolute;
bottom: 0;
left: 0;
}
}
One of the tricks i just learned is instead of working with div borders try adding an :after selector to the heading like :
h1:after{
content: " ";
display: block;
width: 1.5em;
height: .2em;
background-color: #f0860c;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>test</h1>
</body>
</html>
No. If you want to do this purely with HTML+CSS you would need a secondary element to sit beneath the text, and then apply curvature and background colour to that. Alternatively, and cringe-worthy, in my opinion, you could use an image.
Like youtag's answer, my solution uses pseudo-elements—but my underline only runs the length of the text and can wrap onto multiple lines (with an underline running beneath each line of text).
Basically, I manually cap the ends of the element's border with pseudo-element circles before and after the element:
h1 a {
text-decoration: none;
position: relative;
border-bottom: 15px solid;
padding-bottom:3px;
}
h1 a:hover, h1 a:focus {
border-bottom: 15px solid #eb6d32;
}
h1 a:before, h1 a:after {
content: '';
height: 15px;
width: 15px;
background-color: currentColor;
border-radius: 15px;
position: relative;
display: inline-block;
vertical-align: text-bottom;
margin-bottom: -18px;
}
h1 a:before {
left: .2ex;
margin-left: -.4ex;
}
h1 a:after {
margin-right: -.4ex;
right: .2ex;
}
I use left and right on the pseudo-elements so the ends don't stick out too far past the text.
See my codepen.
you can do that by using a div beneath the text and setting its border-radius to 2000px. i think that will be simpler
HTML:
<div class="wrapper">
<span>Hell World</span>
<div class="underline"></div>
</div>
CSS:
.underline{
height:0px;border: 3px solid black;
border-radius: 2000px;
}
.wrapper{
display:inline-block;
}
JQUERY SNIPPET:
var arbitrarynumber = 5
$('.underline').width($('.underline').parent().width()-arbitrarynumber)
I have managed to create an HTML page layout that emulates a paper document page, with a white paper page casting a shadow over a gray background, pretty similar to Acrobat Reader, MS Word and even Firefox's very own Print Preview visualization.
I followed a lot of suggestions found in SO about proper use of CSS3 (in which I am a total beginner), and the last feature were the #media rules.
So, I got to the present document, where the browser's print preview should display only the "printable_area" div and its content, but print preview is showing blank, and I don't know that I am doing wrong (I am using Firefox):
<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>A Page to Print</title>
<style type="text/css">
#media print {
html, body, .paperpage {display:none}
.printable_area * {display:block}
}
#media all {
html, body {
margin:0; padding:0; height: 100%;
}
body {
background-color: #aaa;
}
.paperpage {
position: absolute;
width: 600px;
padding: 20px;
margin-left: -320px;
left: 50%;
top:10px;
bottom:10px;
background-color: white;
box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.8);
overflow-y: hidden;
}
.printable_area {
position: relative;
margin: 0 auto;
height: auto !important;
min-height: 100%;
}
#cabecalho {
padding: 0;
height: 100px;
border-style:solid;
border-width:1px;
border-color:black;
}
#main {
position: absolute;
top: 100px;
width: 100%;
}
h3 {
text-align: center
}
#rodape {
position: absolute;
bottom: 0;
width: 100%;
font-weight:bold;
font-size:50%;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
background-color: hsl(185,60%,90%);
text-align: center;
}}
</style>
</head>
<body>
<div class="paperpage">
<div class="printable_area">
<div id="cabecalho" style=" background: -moz-linear-gradient(top, #4DCDD6 0%, #fff 50%);"/>
<img src="MarcaMiotecNova.svg" height="40%" />
</div>
<div id="main">
<h3>Eletromiografia de Superfície</h3>
<p align="center">Exame realizado em condições ideais de temperatura e eletrovoltagem.</p>
</div>
<div id="rodape">
<p>My Company</p>
<p>Address St, 1234 - Don't Drive - Nice City</p>
<p>www.mycompany.com.br</p>
</div>
</div>
</div>
</body>
</html>
Any help would be much appreciated.
Thanks for reading!
An element will not be rendered if it, or any of its ancestors, is display: none.
You have set html to display: none so no element in the document will be rendered.
You need to be more selective about the content you hide.