I'm new with css, but the thing that i'm trying to do is slightly complicated, at least for me. I have a picture that i want to cover with a circle, transparent from the inside, black from the outside.
this is what I've accomplished so far:
.roundedBorder {
border: 1px solid #1EC865;
border-width: 4px;
border-radius: 81px;
}
.img { position:absolute; top:6px; left:6px; width:81px;
}
<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg">
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder">
</div>
https://jsfiddle.net/dmL56kek/
now i'm looking to cover the outer of circle with a solid color.
PS: i don't want to apply any style on the image because it won't work in my case.
A little change is css would help and i have used width:78px with a calculation that width of outer div is 70px and border is 4px from left and right.
.roundedBorder {
border: 1px solid #1EC865;
border-width: 4px;
border-radius: 81px;
}
.img { position:absolute; top:8px; left:8px; width:78px; border-radius:100%;}
<img class=img src="http://suptg.thisisnotatrueending.com/archive/13559636/images/1295334728830.jpg">
<div style="position:absolute;width:70px;height:70px;border-width: 4px;position:absolute;" class="roundedBorder">
</div>
Related
I just wanted to ask if there is a certain type of code that may give me double or triple lines in one code or would I have to create a separate code for each line.
This is what I would like to have.
I'm not certain that this is possible with CSS alone, but you could use two or three nested block elements, e.g. <div>s, with a small amount of padding between each. For example:
.multi-border {
border: 1px solid black;
padding: 5px;
}
<div class="multi-border">
<div class="multi-border">
<div class="multi-border">
I am some example text!
</div>
</div>
</div>
Well you can do some styling with borders. Check this out
CSS Border Style
There is a solution on the web for this. It looks like the action is here, but I will link to the source below.
.underline--double {
box-shadow:
inset 0 -0.075em white,
inset 0 -0.1em red,
inset 0 -0.15em white,
inset 0 -0.175em red;
}
Source
You can use before and after for a class. By this you get maximum 3 border for a single class.
<div class="border">
This is the code
</div>
.border {
position:relative;
border:5px solid #000;
height:210px;
width:210px;
background: #f8f8f8;
padding:30px;
border-radius: 9px;
}
.border:before {
content:"";
position: absolute;
top:5px;
bottom:5px;
left:5px;
right:5px;
border:5px solid #999;
border-radius: 8px;
}
.border:after {
content:"";
position: absolute;
top:15px;
bottom:15px;
left:15px;
right:15px;
border:5px solid #666;
border-radius: 8px;
}
I want to display a chat bubble behind some text. Essentially the questions boils down to properly scaling background images.
I am mostly an Android developer and this is easy to do with a .9 image. I want to be able to do the same for an HTML page.
What i want is create a image that i can specify which sections strech and which dont. This would allow me to best scale the image as a background.
Currently my attempt looks like this.
Here is my code for this.
<div style="background-image: url(../home_images/chat_right.png);background-size: 100% 100%; background-repeat:no-repeat;"><em>“What RiteCare has done for my child is an amazing gift. Watching him grow in front of my eyes has been so incredible.” </em> ~Margaret</div>
You can just use plain old CSS. There's no reason to have to stretch and skew an image.
<div class="chatBubble">
<div class="message">
And then, this one time, at band camp....
</div>
</div>
<div class="triangle-down">
</div>
Applicable CSS:
.message {
color: #000;
font-size:14pt;
font-weight:bold;
text-align:left;
}
.chatBubble {
border: 5px solid purple;
border-radius:10px;
background-color:white;
padding:15px;
}
.triangle-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid purple;
position:relative;
float:right;
right:10%;
}
Example here:
https://jsfiddle.net/fh5gg77r/
I'm trying to create a custom styled text field for a client.
They want a trapezium shaped input field.
This is what I've done till now:
HTML
<input type="text">
CSS
input{
background: #ccc;
color: #000;
border-bottom: 50px solid #ccc;
padding-top:5px;
border-left: 20px solid #fff;
border-right: 20px solid #fff;
height: 0px;
width: 200px;
}
Fiddle
Any idea on how or if it's possible to make something like this: .
Something like this:
<span class="outer">
<span class="inner">
<input type="text" value="test value" />
</span>
</span>
.outer {
display: inline-block;
border-bottom: 34px solid #000;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
.inner {
display: inline-block;
margin: 1px -18px -40px -18px;
border-bottom: 32px solid white;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
input
{
background: transparent;
border: none;
display: inline-block;
font-size: 130%;
}
http://jsfiddle.net/fNCt4/4/
The input itself doesn't contribute to the shape. It's only those two spans. You could use the input element itself for the inner shape, but since you need to add markup anyway, I think you might as well add two 'generic' trapezoid helper shapes and leave the input element untouched.
You'll need two to fake the border. This is needed, because the shape itself is created by adding a border, so the visible border is constructed by overlaying a slightly smaller shape onto the other.
The rest is tricks with negative margins to allow the inner shape to be positioned over the border of the outer shape. And of course using transparent as a color, to prevent the 'negative space' of the inner shape to overwrite the outer shape.
Once again clients being complicated!
I suggest you use a background image In the CSS of a trapezium with the outside transparent so a png. Make the margins in a bit so the user doesn't write outside the trapezium.
Hope this helps
You have two options here
CSS3
Image as a background.
for css3 option check out this link http://css-tricks.com/examples/ShapesOfCSS/
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0; width: 100px;
}
But to make it backward compatible i would suggest you go for image as a background as a fallback for css3.
This is my first post. I'm still learning CSS and your help is much appreciated.
I have been trying to create a Div that contains an image with a transparent overlay with a semi transparent border at the bottom. On hover, a second transparent overlay is added making the bottom border darker. I then have another div containing some title text, the title text should change colour on hover anywhere in the parent Div as well as the whole thing be linked on click.
The closest thing to it is on Vimeo here:
http://vimeo.com/categories
I have managed to achieve all of this and it has been working fine in IE and Firefox and safari etc. But with IE10 the text no longer changes colour on hover nor is the div clickable.
Here's my CSS:
.videoCatThumbImg {
position:relative;
background:#FFFFFF;
width: 178px;
height: 178px;
padding: 5px 5px 5px 5px;
margin: 10px 0px 0px 0px;
border: 1px solid #CCCCCC;
line-height:normal;
float:left;
}
.videoCatTskin {
position: absolute; top: 5px; left: 5px;
}
.videoCatThumbHover {
position: absolute; top: 5px; left: 5px; display: none;
}
.videoCatThumbImg:hover .videoCatThumbHover{
display: block;
}
.videoCatTitle {
position:absolute;
top:5px; left:5px;
display:block;
width:173px;
height:26px;
padding:152px 0px 0px 5px;
Font-size:18px;
font-weight:bold;
color: #ffffff;
}
.videoCatTitle:hover {
color: #5798ca;
}
and here's my HTML:
<div class="videoCatThumbImg">
<img src="http://www.mydomain.com/images/vcat/image_thumb.gif" alt=""/>
<img class="videoCatTskin" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<img class="videoCatThumbHover" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<div class="videoCatTitle">Some Text Here</div>
</div>
Any advice on what I'm doing wrong is very welcome.
Similar to this answer, try adding a background (transparent image or same-color will work), to the hover classes that don't have it (.videoCatThumbImg:hover).
Just had the problem. None of the solutions were working (border, background, hasLayout).
In the end, I switched to XHTML 1 Strict doctype and it worked, if it can help...
Let assume that I have image with border: 1 px solid black because i want it to have border. But for more i want rounded corners so i give border-radius: 10px. But this now looks bad because corners don't have border. Is there possibility in html and css to do something which give borders to corners or answer is maybe somewhere in (for example) in jQuery?
sure just put the border on too.. and where there's a background color you can use an image, however IE support will be non-existant, but you might try CSSPie for enhancement for it. I think also some browsers do have a problem clipping on image to the round corners but am not too sure on overall support or fixes, perhaps putting the border on a parent div then rounding the image inside it might give a neat effect?
Example Fiddle
div, img {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #000;
background: #0f0;
width: 200px;
margin: 50px;
text-align: center;
line-height: 40px;
}
HTML:
<div>rounded with border</div>
<img src="http://placekitten.com/100/100/" alt="">
Update: Webkit browsers do have problems with this if it's actually an image that needs rounding with borders, here's one workaround that seems to help:
New Example Fiddle
(view with webkit to see difference between second and third images)
HTML:
<div class="ri"><img src="http://placekitten.com/100/100/" alt=""></div>
CSS:
div {
margin: 50px;
text-align: center;
line-height: 40px;
width: 100px;
height: 100px;
}
.ri {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-background-clip: padding-box;
border: 1px solid #000;
}
.ri img {
display: block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-background-clip: padding-box;
}
the background-clip is supposed to help the background clip to the padding-box, which should in theory stop a background-image or color from extending into the border, but in itself it doesn't appear to work very well, so I nested the image and rounded both it and the parent div and then put the border onto the parent div, Webkit was happy ;)
You might try this curved-corner project on Google Code that purports to allow the border-radius CSS property to work cross-browser.
you can write with css3 & for IE you can download piecss3 js.
Example
div{
width:200px;
height:200px;
background:red;
color:#fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
border:2px solid yellow;
behavior: url(PIE.htc);
}
check this
http://jsfiddle.net/sandeep/KDBGV/
The other ways is:
CSS:
.container {
background:gray;
color:#fff;
margin:0 15px;
}
.rtop, .rbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
HTML:
<div class="container">
<b class="crvtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
Place the content here
<b class="crvbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
This is going to work in all the browsers.
Cheers and Enjoy :)
Well Cris,
The classes are for the spanned elements to create a curvy edges. Simply modify
.rtop, .rbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
with
.crvtop, .crvbottom {
display:block;
background:#fff;
}
.crvtop *, .crvbottom * {
display: block;
height: 1px;
overflow: hidden;
background:gray;
}
and it will work
Hope that helps..