I'm going to write in the form, when it's one word.
But if it's more than two letters, I'll write like this.
Can I make this shape?
count{
position:relative;
color:white;
margin:0.5em;
}
count:before{
content:'';
min-width:1em;
position:absolute;
left:-0.5em;
right:-0.5em;
top:-0.2em;
bottom:-0.2em;
background-color:blue;
z-index:-4;
border-radius:1em;
}
<count>100</count>
<count>5</count>
<count>100.000</count>
Try this
You can achieve this kind of shape using border radius.
Get more info.
Border Radius
<h2 class="number">5</h2>
<h2 class="text">99+</h2>
and use this css
.number{
background:blue;
border-radius:50%;
padding:5px;
width:50px;
height:50px;
text-align:center;
line-height:50px;
color:white;
}
.text{
background:blue;
border-radius:25px;
padding:25px;
text-align:center;
line-height:25px;
color:white;
}
Related
The following code doesn't work. I want to predefine the :before and :after to be used in everywhere in the code.
&:after, &:before{
content:""; display:block; width:100%; height:100%; border-radius:50%;
}
.myclass:after{background-color:red;}
But the following code works:
.myclass:after{background-color:red;
content:""; display:block; width:100%; height:100%; border-radius:50%;
}
What am I doing wrong in defining it?
Thanks.
* not(&) is the selector for "all"
*::after, *::before{
content:"";
display:block;
width:100%;
height:100%;
border-radius:50%;
}
& is used in SASS (and probably other pre-processors) to attach selectors like:
.test {
&::after, &::before { // renders to .test::after, .test::before
content:"";
display:block;
width:100%;
height:100%;
border-radius:50%;
}
}
I want to make that line crossing the square (image below) in css, could anyone help me?
img http://www.brainmotion.com.br/download/img.png
If i have a div like this:
<div class="abcd">
</div>
.a {border:1px solid;}
Thanks so much
You can try using CSS triangle trick to render 2 triangles, the first has border-color the same as the color you want, the second has border-color the same as the background-color of the div:
div {
width:49px;
height:49px;
border:1px solid black;
position:relative;
}
div:before {
content:'';
position:absolute;
width:0;
height:0;
top:-1px;
left:-1px;
border:25px solid transparent;
border-right:25px solid black;
border-bottom:25px solid black;
z-index:-3;
}
div:after {
position:absolute;
content:'';
width:0;
height:0;
top:1px;
left:1px;
border:24px solid transparent;
border-right:24px solid white;
border-bottom:24px solid white;
z-index:-2;
}
Here is the fiddle
Note that with this solution, you have to tweak it a little with trial and error method.
UPDATE: Another simple method is using linear-gradient to generate the diagonal dynamically for the background of the div like this:
div {
width:50px;
height:50px;
border:1px solid black;
position:relative;
text-align:center;
line-height:50px;
font-size:25px;
background:linear-gradient(to bottom right, white, white 48%, black 50%, white 52%, white);
}
Here is the updated fiddle
Yes, you could do this using transform: rotate(45deg); in combination with overflow: hidden on the parent <div>, but I would highly discourage that, as It would be a disaster in terms of browser compatibility. I would just use the image.
Here is an example (note: quick and sloppy) that I tested in chrome that works:
http://jsfiddle.net/97xsh/1/
here is one that achieves the same effect.
http://jsfiddle.net/j8USa/1/
.box{
width:40px;
height:40px;
border:1px #000 solid;
overflow:hidden;
position:relative;
text-align:center;
vertical-align:middle;
}
.strike{
position:absolute;
width:60px;
height:1px;
border-top:1px #000 solid;
margin-top:20px;
margin-left:-10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.box span{
vertical-align:middle;
font-size: 26pt;
color:red;
}
I'm trying to create a table with div tag instead of table tag
I wrote following in my css file:
.div-table{
display:table;
border-collapse:collapse;
border:1px solid lightgray;
margin-right:1%; margin-left:1%;
width:99%;
font-size:13px; font-family:Verdana;
}
.div-table-row1{
display:table-row;
background-color:White;
width:33%;
clear:both;
}
.div-table-col{
float:left;
display:table-column;
border:1px solid lightgray;
width:33%;
}
I applied this to my table but the borders are coming according to the size of content in each cell individually.
So sometimes i get double border...
I cannot apply height attribute here as data coming through tables so it is dynamic in size
I dont know how to remove those double borders from a cell and make all cell's size in a row equal.
Please help !!!!!
Change
border-collapse:collapse;
to
border-collapse:separate;
or
remove border-collapse
Changes
.div-table{
display:table;
border-collapse:collapse;
border:1px solid lightgray;
margin-right:1%; margin-left:1%;
width:99%;
font-size:13px; font-family:Verdana;
}
to
.div-table{
display:table;
border-collapse:separate;
border:1px solid lightgray;
margin-right:1%; margin-left:1%;
width:99%;
font-size:13px; font-family:Verdana;
}
I believe that if you apply
table-layout:fixed
...to .div-table and set the width of the cells, they should behave the way you like.
How can I make a background like the attached image in css? I have experimented with border so that I can give it a shape like the black part, but in that case I cannot write text so I guess border shapes of parallelogram will not work any other ideas?
You can write like this:
CSS
.tab{
width:200px;
height:40px;
position:relative;
background:#000;
}
.tab:after{
content:'';
right:-40px;
top:0;
position:absolute;
width:0;
height:0;
border-width:20px;
border-color: transparent transparent #000 #000;
border-style:solid;
}
Check this http://jsfiddle.net/696Sb/
Y0u can also use css3 transform for this. Write like this:
.tab:after{
content:'';
right:-30px;
top:10px;
position:absolute;
width:60px;
height:60px;
background:#000;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
Check this http://jsfiddle.net/696Sb/1/
Here are 2 tutorials to make diagonal/triangle in CSS:
How to Create Diagonal Lines with CSS
CSS triangle
Do you want to be able to write under the uppermost black horizontal line (on left, left of the diagonal)?
Hey now you can do this use after and before properties in css as like this
HTML
<div class="shape"></div>
Css
.shape{
background:#000;
margin:40px 20px;
height:100px;
width:700px;
position:relative;
}
.shape:after{
content:'';
position:absolute;
top:-20px;
right:0;
height:20px;
border-left:solid 30px #000;
border-right:transparent 30px solid;
border-top:transparent 20px solid;
}
.shape:before{
content:'';
position:absolute;
top:-20px;
left:0;
right:60px;
height:20px;
background:#000;
}
Live demo http://jsfiddle.net/uuxd8/
Updated
Live demo two http://jsfiddle.net/uuxd8/1/
I have this structure:
<div class="gBigPage">
<span class="gBigMonthShort">FEB</span><br />
<span class="gBigDayShort">23</span><br />
<span class="gBigYearShort">2011</span>
</div>
The gaps between the text lines are too big, I need them shortened so they are all virtually touching.
/* Mouseover div for day numbers */
.gBigPage{
height:45px;
width:30px;
font-family:Arial;
font-weight:bold;
background-color:#ffee99;
text-align:center;
border-top:1px solid #c0c0c0;
border-left:1px solid #c0c0c0;
border-right:1px solid #c0c0c0;
position:absolute;
z-index:3;
}
.gBigPage:hover{
cursor:pointer;
}
/* In the big day box, the month at top */
.gBigMonthShort{
text-transform:uppercase;
font-size:11px;
}
.gBigYearShort{
font-size:11px;
}
.gBigDayShort{
font-size:16px;
}
I can't do relative positioning for the spans, as there is a bug in Chrome which flickers the mouseover effect, pure CSS is the only thing that seems to work.
Fiddle for example:
http://jsfiddle.net/GmKsv/
All you need is line-hight in your css. Add this to your gBigPage.
Here is the code:
.gBigPage{
height:45px;
width:30px;
font-family:Arial;
font-weight:bold;
background-color:#ffee99;
text-align:center;
border-top:1px solid #c0c0c0;
border-left:1px solid #c0c0c0;
border-right:1px solid #c0c0c0;
position:absolute;
z-index:3;
line-height: 13px;
}
Demo on jsFiddle
Hope it helps!
Use line-height in your css :) you can reduce the gap between lines
Set each element's line-height style, e.g.
.gBigMonthShort { line-height: 10px; }
Tom, have you tried using CSS line-height?
link text
Need to set 2 levels of line height, one in container and one for each span.
* Mouseover div for day numbers */
.gBigPage{
height:45px;
width:30px;
font-family:Arial;
font-weight:bold;
background-color:#ffee99;
text-align:center;
border-top:1px solid #c0c0c0;
border-left:1px solid #c0c0c0;
border-right:1px solid #c0c0c0;
position:absolute;
z-index:3;
line-height:4px;
}
/* In the big day box, the month at top */
.gBigMonthShort{
text-transform:uppercase;
font-size:11px;
line-height:13px;
}
.gBigYearShort{
font-size:11px;
line-height:9px;
}
.gBigDayShort{
font-size:16px;
line-height: 13px;
}
Make the <span>s block-level, and remove the line breaks:
http://jsfiddle.net/GmKsv/12/