I am trying to do some CSS to complement my HTML code. I am effectively trying to make a little box which changes size based on the amount of text there is. Currently, this is what it looks like in action.
Essentially, I'd like it to form a little box around the text. Notice the last 'box' in the image, if the string is too long, it cuts it off and continues on the next line.
Included is the CSS code and an example of usage.
<style type="text/css">
boxytest
{
padding: 10px;
text-align: center;
line-height: 400%%;
background-color: #fff;
border: 5px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
</style>
<body>
<div align="center">
<boxytest> Hey guys! What's up? </boxytest>
</div>
</body>
Any help is greatly appreciated.
As chipcullen says inventing your own element is probably not the best way to go about this. But to answer your question the key style decleration your missing appears to be display:inline-block;
jsfiddle here
Well, I think first off, in terms of markup, you want to make boxytest a class, and not create a new element. And don't use 'align=center'. It's a pain to maintain.
I would do something like this:
<body>
<p class="boxy">Test sentence</p>
<body>
The in CSS:
.boxy {
padding: 10px;
text-align: center;
line-height: 400%%;
background-color: #fff;
border: 5px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
/* to prevent word wrapping */
white-space: nowrap;
overflow: hidden;
}
The last bit is based on this post.
Related
I'm making a web page (lots of them that are connected)
I have added the glow function/attribute to my buttons in CSS. The thing is I've used this;
button:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
The thing is, my CSS file is linked and being used by 5 different HTML files and more are coming. So instead of just getting the glow effect on just 4-5 buttons that I have on one HTML page, the glow function now is on all buttons on all other HTML pages.
How do I avoid this, I cant add the glow function inside the #id's can I?
My buttons like like this in css
#TrafficJam1 {
position: absolute;
top: 1120px;
left: 20px;
height:107px;
width: 278px;
}
That's just one of them
Here's the HTML part of that particular one,
<input type="image" src="TrafficJam.jpg" id="TrafficJam1">
I have to use this code because my buttons are images.
Give the buttons you want to apply this CSS to a class like this:
<input type="image" src="TrafficJam.jpg" id="TrafficJam1" class="glow">
A class is another identifier for html elements. But it's different from id in the sense that you may use them to target multiple elements at a time. So you can just give the buttons you want this effect on the same class and target that class in your CSS like this:
.glow:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
Then a little bit off topic. The thing you're asking is pretty basic stuff. So I get it that you're beginner at HTML and CSS, right? In case you are it would be wise to learn some more HTML and CSS with an online learning tool like codecademy.com.
Create a new stylesheet and link this in the page where you want the buttons to glow.
This is easily done by using the <link> tag, but I guess you are familiar with that.
In that file you could just add the code you were using:
.classname:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
so i have a nice box-shadow that seems to work in all browsers except ie 8 and below. I need my site to be compatible for IE 8.
here is the effect that i'm referring to:
http://unifiedforuganda.com/ugandanprograms.html
here is the relevant css:
.program-image {
position: relative;
float: left;
width: 400px;
padding: 2px;
margin: 10px 20px 10px 0;
-moz-box-shadow: 3px 3px 15px 3px #414141;
-webkit-box-shadow: 3px 3px 15px 3px #414141;
box-shadow: 3px 3px 15px 3px #414141;
}
i don't care about the shadow showing up in IE but is it possible to have a black border be there for the image only when the shadow is not rendered? i want to avoid IE conditional sheets if possible
EDIT: seems i even have to use conditional comments or use a hack which i don't want to. now just have to figure out to use the conditional comments for IE....
As you can see here, box-shadow is not supported until IE9. But here is a SO post expalining the usability of box-shadow in IE8 and below.
so i ended up using conditional comments in the of the html document...simplier than i thought....here the code i ended up using:
<!--[if lte IE 8]>
<style type="text/css">
.program-image { border: 1px solid black; }
</style>
<![endif]-->
this will target the .program-image class that normally has the box shadow working in most other browsers but when that fails, the above code will kick in and apply a small black border...this is the css:
.program-image {
position: relative;
float: left;
width: 400px;
padding: 2px;
margin: 10px 20px 10px 0;
-moz-box-shadow: 3px 3px 15px 3px #414141;
-webkit-box-shadow: 3px 3px 15px 3px #414141;
box-shadow: 3px 3px 15px 3px #414141;
}
I'm trying to create an overlay shadow over an image in CSS but I can't seem to get it right.
Here's the code that I have so far.
http://jsfiddle.net/Qf4Ka/1/
HTML
<section id="top-container" class="top-column" style="width:1050px; height:420px; ">
<div class="image" style="padding-top: 10px; float:left;"><img src="http://www.hdwallpapersinn.com/wp-content/uploads/2012/09/HD-Wallpaper-1920x1080.jpg" border="0"; width="263"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd;">
<h4 style="font-size:30px; top: 90px; ">Nature</h4></div>
<div class="image" style="padding-top: 10px; float:left;"><img src="http://www.hdwallpapersart.com/wp-content/uploads/2013/04/tiger_wallpapers_hd_Bengal_Tiger_hd_wallpaper1.jpg" border="0"; width="262"; height="200" style="display: block; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; ">
<h4 style="font-size:30px; top: 90px; ">Bengal Tiger</h4></div>
</section>
CSS
.image {
position: relative;
}
h4 {
position: absolute;
width: 100%;
color: #fff;
float: left;
position: absolute;
font-size: 40px;
font-family: "Oswald";
text-align: center;
max-height:auto;
z-index:20;
text-shadow:1px 1px 2px #000;
-moz-text-shadow:1px 1px 2px #000;
-ms-text-shadow:1px 1px 2px #000;
-o-text-shadow:1px 1px 2px #000;
-webkit-text-shadow:1px 1px 2px #000;
}
I basically want it to look like the one in this website. I tried looking at some tutorials online but it screwed it up real bad so I removed it. I want it to look like the one in this website before and after I hover around the image. Thanks so much to anybody who can help me.
http://vr-zone.com/
Like this
demo
css
.image {
position: relative;
-webkit-box-shadow: inset 0 0 10px 10px #000;
-moz-box-shadow: inset 0 0 10px 10px #000;
box-shadow: inset 0 0 10px 10px #000;
}
OR REF LINK
Your text shadow effect actually seems to work fine, just a few syntactical errors within the html, and need to import the font. Also you don't need to vendor prefix the text-shadow rule.
Check this DEMO.
Edit: I agree with the comment above - Yes, if you are trying to give box-shadow to the image, then use box-shadow.
In the snippet http://jsfiddle.net/hXMLF/3/ you see a small border on the corners between the white border of the cells and the page background. How can I prevent it?
HTML
<table cellspacing="0" cellpadding="0">
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
CSS
body {
background-color: #efefef;
}
table {
margin: 10px;
border-collapse: separate;
border-spacing: 0px;
}
td {
border-radius: 5px;
background-color: #369;
color: white;
border: 5px solid white;
}
There are two solutions I came up with. Use solution 2 but I'm keeping solution 1 here as well because it may come in handy in some other situation to someone else.
Solution 1: Display
Changing td display to inline-block does the trick but may impact your actual content elsewhere...
td {
display: inline-block; /* this has been added */
border-radius: 5px;
background-color: #369;
color: white;
border: 5px solid white;
}
Here's your changed JSFiddle for solution 1.
Solution 2: Background clip (recommended)
But since you're using CSS3 anyway this is an even better solution:
td {
background-clip: padding-box; /* this has been added */
border-radius: 5px;
background-color: #369;
color: white;
border: 5px solid white;
}
Here's your changed JSFiddle for solution 2.
If it doesn't work on all browsers, you should be aware that there are browser specific settings as -moz-background-clip and -webkit-background-clip that use a different set of values (they basically omit box from border-box, padding-box and content-box)
This happens because
border-collapse: separate;
makes it like that. Tables aren't exactly the prima donna at styling, I recommend You try to use <div> tags instead.
TRY THIS: http://jsfiddle.net/hXMLF/9/
Check this link. You can generate CSS for round corner cell.
http://cssround.com/
Example:
<div
style="
width:400px;
height:300px;
-webkit-border-radius: 0px 26px 0px 0px;
-moz-border-radius: 0px 26px 0px 0px;
border-radius: 0px 26px 0px 0px;
background-color:#C2E3BF;
-webkit-box-shadow: #B3B3B3 2px 2px 2px;
-moz-box-shadow: #B3B3B3 2px 2px 2px;
box-shadow: #B3B3B3 2px 2px 2px;
">
Just modify width and height values to get what you need...
</div>
How do I get rid of the shadow in the red area below? I have seen other similar questions but don't know how to apply that here.
Live Demo: http://jsfiddle.net/xFa9M/
CSS:-
#list li{
border: 2px solid black;
border-top-width: 1px;
border-bottom-width: 1px;
padding: 4em;
z-index: 1;
}
#list li .tip{
position: absolute;
left: 200px;
top: 0px;
border: 2px solid black;
border-left-width: 0px;
z-index: 0;
display: none;
}
#list li:hover{
-moz-box-shadow: -5px 5px 5px black;
-webkit-box-shadow: -5px 5px 5px black;
box-shadow: -5px 5px 5px #555;
}
#list li:hover .tip{
-moz-box-shadow: -5px 5px 5px black;
-webkit-box-shadow: -5px 5px 5px black;
box-shadow: -5px 5px 5px #555;
}
Html:-
<ul id="list">
<li class="top">About Me
<div class="tip">Asas</div>
<li>Garage
<li class="bottom">My Blog
</ul>
Please note that it is ok for me to use JS code tricks, if needed.
If I understand correctly, you are having problems with the middle li's having shadow, while you only want the first (and maybe last) li to have shadow.
If I understood correctly, you could use the li:first-child and li:last-child to set the shadow to the first and last element of your list.
But this is not the case. If you want to hide the left shadow on your .tip, you should set the first paramater of box-shadow to 0px. The first parameter is the horizontal offset.
Like here:
http://jsfiddle.net/rf47W/
Was this what you were looking for?
You cannot.
In order to get around the issue, don't assign dropshadows to the "about me" and "asas" boxes separately, but rather wrap them in a single container and apply the shadow to it.
Have you tried targeting that element with a specific class/id/whatever selector and inserting
the code below?
-moz-box-shadow:none;
-webkit-box-shadow: none;
box-shadow: none;
The CSS and HTML given does not produce the display shown in the image, so I'm having to guess, but try wrapping the asas box in another box with bottom padding and hidden overflow.