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.
Related
I'm trying to align a triangle next to written text in a button using only HTML and CSS. For the life of me, I can remember how.
.room-info-btn {
background-color: #FFA500;
color: #fff;
border-radius: 4px;
padding: 5px 11px;
font-size: 20px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
}
<li>
<button class="room-info-btn" id="room-info-btn">
<div class="arrow-down"></div>
Rooms / Availability
</button>
</li>
I highly recommend checking out Flexbox.
For your code, you can simply add the following css to your .room-info-btn selector:
display: flex;
align-items: center;
This makes aligning many items very simple and gives you other flex control options.
Try this. Flexbox is a better choice I guess.
Take a look here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.room-info-btn {
background-color: #FFA500;
color: #fff;
border-radius: 4px;
padding: 5px 11px;
font-size: 20px;
display: flex;
align-items:center;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
}
<li>
<button class="room-info-btn" id="room-info-btn">
<div class="arrow-down"></div>
Rooms / Availability
</button>
</li>
Try display: inline-table; in arrow-down class to align with the text
While building a page, I encountered a problem i couldn't explain:
The first div in a sidebar has a weird break above
Second picture, showing that the top div in sidebar (template-sidebar-payment) doesn't actually contain that gap.
I had a margin appear from nowhere, without it being set anywhere (I've searched broad and wide).
#template-sidebar {
display: table-cell;
width: 200px;
padding-right: 15px;
height: 626px;
background: #FFF;
border-right: 7px solid #fec30d;
}
.sidebar-element {
height: 200px;
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
}
.sidebar-element hr {
border: none;
height: 1px;
color: #c6c6c6;
background-color: #c6c6c6;
/*border: 0.5px solid #c6c6c6;*/
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
}
.sidebar-element h4 {
padding-top: 10px;
}
#template-sidebar-payment {
border-top: 0;
!important
}
#template-sidebar-rules {
border-bottom: 0;
!important
}
<div id="template-sidebar">
<div id="template-sidebar-payment" class="sidebar-element">
<hr noshade/>
<h4>Sposoby płatności</h4>
</div>
<div id="template-sidebar-delivery" class="sidebar-element">
<hr noshade/>
<h4>Sposoby dostawy</h4>
</div>
<div id="template-sidebar-rules" class="sidebar-element">
<hr noshade/>
<h4>Regulamin</h4>
</div>
</div>
Please note, that the reason for making this a table-cell is because I want the sidebar to scale along the (right hand side) content as it expands in length.
As for now, I tried removing certain things, adding display: blocks etc. but nothing helped.
If any more code is needed (I guess there might be a case where te problem could lie somewhere else?) please ask in comments and I will be happy to provide.
we need live demo for inspecting this situation. but i think setting vertical align to sidebar will solve your problem.
#template-sidebar {
vertical-align:top;
}
I think it's the margin from the hr. Add a margin-top: 0 to it:
#template-sidebar{
display: table-cell;
width: 200px;
padding-right: 15px;
height: 626px;
background: #FFF;
border-right: 7px solid #fec30d;
}
.sidebar-element{
height: 200px;
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
}
.sidebar-element hr {
border: none;
height: 1px;
margin-top: 0;
color: #c6c6c6;
background-color: #c6c6c6;
/*border: 0.5px solid #c6c6c6;*/
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
}
.sidebar-element h4 {
padding-top: 10px;
}
#template-sidebar-payment{
border-top: 0; !important
}
#template-sidebar-rules{
border-bottom: 0; !important
}
<div id="template-sidebar">
<div id="template-sidebar-payment" class="sidebar-element">
<hr noshade/>
<h4>Sposoby płatności</h4>
</div>
<div id="template-sidebar-delivery" class="sidebar-element">
<hr noshade/>
<h4>Sposoby dostawy</h4>
</div>
<div id="template-sidebar-rules" class="sidebar-element">
<hr noshade/>
<h4>Regulamin</h4>
</div>
</div>
The only issue I see, is the padding-right.
Attempt altering padding-right from 15px to 5px and see if that changes anything.
EDIT: Saw your comment. See below.
It probably origins from the
.sidebar-element h4 {
padding-top: 10px;
}
part of your style sheet.
I want to create a border as shown in the image. I tried with all the styles inset, outset,ridge and groove but I was not able to get the expected result.
Is there any way to bend border towards inside till middle and get back towards till top(hope you understand the problem).
If it's repeated question please add the solution link.
Thanks in advance.
I have tried this:
div {
border-bottom: 1px ridge #B5B9BB;
/*border-bottom: 1px inset #B5B9BB;
border-bottom: 1px outset #B5B9BB;
border-bottom: 1px groove #B5B9BB; */
}
You could use outline:
.bordered {
border-bottom: 1px solid grey;
background: aliceblue;
outline: 5px solid aliceblue;
}
<div class="bordered">Available Apps</div>
Demo
Seems why not just use a border on the text?
div {
background: lightgrey;
padding: 0.5em;
}
p {
border-bottom: 1px ridge #B5B9BB;
}
<div>
<p>Available Apps</p>
</div>
It is probably best to use a wrapping element if possible; it is more flexible than outline (supports border-radius, box-shadows etc.)
For example:
<div class="headline-area">
<h2>Available Apps</h2>
</div>
with the CSS:
.headline-area {
background:#D4D9DC;
padding:5px;
}
.headline-area h2 {
border-bottom:1px solid #B5B9BB;
}
Whenever I am in your situation I use box-shadow:
body {
background:#D1D6D9;
font-family:verdana;
}
div {
border-bottom: 1px solid #B5B9BB;
box-shadow:0 1px 1px rgba(255,255,255,.7);
padding-bottom:5px;
}
<div>Available Apps</div>
You could always try a hr tag. You can then style it in CSS to your desired preference.
HTML
New apps
<hr>
Try this Also but you need an extra Div to do so.
HTML
<div class="outerDiv">
COntent
<div class="innerDiV">
</div>
<div>
CSS
.outerDiv{
background-color: grey;
height: 32px;
text-align: center;
padding: 16px;
font-weight: bolder;
font-size: 25px;
}
.innerDiV{
margin: 0 auto;
border: 1px solid black;
width: 98%;
margin-top: 10px;
}
Demo
I am working on a tabbing system for my website like in the image below.
Here is my mark-up and LESS code:
<div class="tabsWrapper">
<div class="tabbar">
<div class="tabbarButton current" id="tArticles">
<img class="icon" src="/res/img/articles_archive.png" alt=""/>
<span class="caption">Arhivă de articole</span>
</div>
<div class="tabbarButton" id="tFiles">
<img class="icon" src="/res/img/files_archive.png" alt=""/>
<span class="caption">Arhivă de fișiere</span>
</div>
</div>
<div class="tabsContent">
<div class="tab current" id="articles"></div>
<div class="tab" id="files"></div>
</div>
</div>
LESS (see full code here)
.tabbar {
display: block;
position: relative;
overflow: hidden;
> .tabbarButton {
height: 45px;
border-top: 1px solid #bfc2c2;
border-right: 1px solid #bfc2c2;
&:first-child { border-left: 1px solid #bfc2c2; }
&:hover {
box-shadow: inset 0 3px 0 #bfc2c2;
}
&.current {
box-shadow: 0 1px 0 #f5f8f8, inset 0 3px 0 #a7aaaa;
border-top: 1px solid #a7aaaa;
background-color: #f5f8f8;
}
}
}
> .tabsContent {
border-bottom: 1px solid #bfc2c2;
border-left: 1px solid #bfc2c2;
border-right: 1px solid #bfc2c2;
border-top: 1px solid #bfc2c2;
background-color: #f5f8f8;
}
How can I make the currently active tab button to stay in front of the others?
The first thing I would try is to add a :after or :before to the tab, with the same width and same background-color but on the forground.
To be sure, if tabbar is positonned relatively, you can positione your :after absolutely so that it's always ok !
I don't understand why your box-shadow-solution doesn't work..
.tabbarButton.current:after
Did you tried to pass your current tab on the forground ? (z-index, translateZ...)
I figured out myself how to achieve the effect I want: by faking the bottom border of the tabs-strip:
Modify the .tabsContent to not have border-top, then provide .tabbar class with a :after pseudo-element:
.tabbar {
// truncated code
&:after {
position: absolute;
display: block;
content: '';
width: 100%;
bottom: 0;
left: 0;
z-index: 1;
border-bottom: 1px solid #bfc2c2;
}
}
It is important to change the z-index of .tabbarButton to 2 (for example) so that it stays in front of the .tabbar:after.
I have an issue with rendering my website for IE, Chrome and Opera. In Firefox the positioning works well:
while in the other browsers it looks like crap:
I have tried several positioning and padding options, but no luck. The problems appeared as I replaced the drop down menu with a jQuery replacement to enhance it graphically. The original dropdown is still there but with the css-option "display: none". I'd be thankful for a hint!
Here is the css:
This is the big blue box
.searchHomeForm a, .searchHomeForm a:hover {
color:#000000;
}
A invisible box around the three elements
div.searchHomeForm , .searchform {
height: 37px;
margin-left: auto;
margin-right: auto;
}
The white search bar
.search_bar {
position: inherit;
height: 25px;
letter-spacing: 0.02em;
line-height: 25px;
padding: 9px 0 0px 9px;
width: 390px;
border: 1px solid #95B6D6;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.11) inset;
border-radius: 0.25em 0 0 0.25em;
}
the jQuery Dropdown replacement
#searchformReplacement {
background: #EBEBEB;
padding: 0px 1px 5px 0;
margin-bottom: 3px;
border-top: 1px solid #95B6D6;
border-bottom: 1px solid #95B6D6;
width: 109px;
position: inherit;
}
the find button
.find_button {
background: url("../images/lupevufindsearchsubmit1.png") no-repeat scroll #bBbBbB;
-moz-border-radius: 0.25em;
border-radius: 0 0.25em 0.25em 0;
position: inherit;
height: 36px;
line-height: 36px;
margin: 0px 0 3px -1px;
padding: 4px 10px 4px 10px;
width: 60px;
border-top: 1px solid #95B6D6;
border-right: 1px solid #95B6D6;
border-bottom: 1px solid #95B6D6;
border-left: none;
box-shadow: 2px 2px 5px rgba(76, 133, 187, 0.50) inset;
transition: all 0.2s ease-in-out 0s;
}
Try removing position: inherit from the .search_bar {}, #searchformReplacement {}and .find_button {} add display:inline-block for each
or add display:inline and float:left for each. You may have to clear floats if you use float:left
maybe use float: left; on the three elemetns next to each other?
I made you a little example to have the required position, I'm using the inline-block propriety (and I love it) :
Html
<div id="container">
<input type="text" class="inline-block" />
<div class="inline-block">
Your custom select
</div>
<button type="submit" class="inline-block">Search</button>
</div>
CSS
.inline-block {
display:inline-block;
*display:inline; /*IE hack*/
*zoom:1; /*IE hack*/
}
#container {
background:lightBlue;
width:300px;
margin:0 auto;
text-align:center;
}
See the working fiddle !
Yes, clearing your floats are important as madhushankarox has pointed out. But you don't always need to use floats, especially not in your case. Plus here's an extra bonus if you ever need to place your form into a liquid layout page. It should proportion itself out equally on most screens that are wide or thin.
CSS
/*the blue rounded box*/
#bluebox {
padding:3% 5%;
margin:0 25%;
background:#d0dcea;
border:solid 1px #b7c2d2;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.fieldset-search {
text-align:center;
}
/*The white search bar*/
.input-search {
padding:5px;
margin:0;
width:50%;
vertical-align: baseline;
border: solid 1px #b7c2d2;
background: #fff;
outline: 0;
}
/*the jQuery Dropdown replacement*/
.list-search {
padding:4px;
margin:0 0 0 -5px;
}
/*the find button*/
.submit-search {
padding:4px 10px;
margin:0 0 0 -5px;
}
HTML
<div id="bluebox">
<div class="fieldset-search">
<input type="text" name="search" class="input-search">
<select name="list" class="list-search"><option></option></select>
<button type="search" class="submit-search">Go</button>
</div>
</div>