I am using something like this and would like to delete the top shadow because it doesn't look good. Any ideas ?
div#custom_html-5.widget_text.widget.widget_custom_html {
box-shadow: 0 0 0.5px black
}
div#custom_html-5.widget_text.widget.widget_custom_html:before {
content: "";
height: 7px;
width: 100%;
position: absolute;
top: -7px;
background: inherit;
z-index: 2;
}
You can use this.
I am sending the full code of what I am trying to do, so you can understand:
div#search-2.widget.widget_search {
margin-bottom: 20px
}
div#search-2.widget.widget_search {
border: 1px solid #dcdcdc
}
div#search-2.widget.widget_search {
box-shadow: 0 0 0.5px black
}
div#search-2.widget.widget_search {
padding-bottom: 20px
}
div#search-2.widget.widget_search {
padding-top: 10px
}
div#search-2.widget.widget_search {
border-bottom: none;
}
div#custom_html-5.widget_text.widget.widget_custom_html {
border: 1px solid #dcdcdc
}
div#custom_html-5.widget_text.widget.widget_custom_html {
box-shadow: 0 0 0.5px black
}
#custom_html-5.widget_text.widget.widget_custom_html {
border-top: none;
}
div#custom_html-5.widget_text.widget.widget_custom_html {
margin-top: -20px
}
div#custom_html-5.widget_text.widget.widget_custom_html {
padding-bottom: 10px
}
Related
I have a div element that will display some message indicating a point on my page.
The arrow should be displayed on the left hand side of the div instead of bottom(currently).
Here is my HTML, CSS and fiddle code.
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.left::before {
left: 0%;
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
.callout.top::before {
left: 0%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
top: 40%;
border-right: 10px solid #444;
}
.callout.top-left::before {
/*left: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
.callout.top-right::before {
/*right: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
<div class="callout top">test</div>
fiddle:- https://jsfiddle.net/5t6s6p5y/
Change CSS to code like:
.callout.top::before {
border-right: 11px solid #444;
bottom: 10px;
left: -20px;
}
Example:
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.left::before {
left: 0%;
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
.callout.top::before {
border-right: 11px solid #444;
bottom: 10px;
left: -20px;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
top: 40%;
border-right: 10px solid #444;
}
.callout.top-left::before {
/*left: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
.callout.top-right::before {
/*right: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
<div class="callout top">test</div>
Also on jFiddle.
You should probably use the class right instead of top, so as to not ruin reusability.
Also, your .callout.right class is missing a left positioning.
ie
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
see: https://jsfiddle.net/5t6s6p5y/2/
I am trying to create right arrow with gray border with css. but I think the arrow is over lapping the left rectangle. some finishing touch is required here:
.arrow_box {
position: relative;
background: #fff;
border: 2px solid #aaa;
width: 300px;
padding: 8px 20px 8px 40px;
}
.arrow_box:after,
.arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-left-color: #fff;
border-width: 17px;
margin-top: -17px;
}
.arrow_box:before {
border-color: rgba(170, 170, 170, 0);
border-left-color: #aaa;
border-width: 19px;
margin-top: -19px;
}
<div class="arrow_box">Consumer Customer
</div>
You can add border on specific sides except right:
.arrow_box {
position: relative;
background: #fff;
border-left: 2px solid #aaa;
border-top: 2px solid #aaa;
border-bottom: 2px solid #aaa;
width: 300px;
padding: 8px 20px 8px 40px;
box-sizing: border-box;
}
https://jsfiddle.net/2ca4aucm/1/
i want to give box shadow on the hexagon
here is my jsfiddle
jsfiddle
and this is my hexagon css property
.hex1 {
background-color: rgba(52,152,219,.5);
text-align: center;
line-height: 70px;
height: 80px;
width: 140px;
margin: 60px 10px;
position: relative;
z-index: 1;
box-shadow:2px 2px 2px 2px grey;
}
.hex1:before {
border-top: 40px solid transparent;
border-bottom: 40px solid rgba(52,152,219,.5);
top: -80px;
}
.hex1:after, .hex1:before {
border-left: 70px solid transparent;
border-right: 70px solid transparent;
content: "";
position: absolute;
left: 0;
z-index: -1;
}
.hex1:after {
bottom: -80px;
border-top: 40px solid rgba(52,152,219,.5);
border-bottom: 40px solid transparent;
}
this is not affecting on my hexagon .. is there any way to five border and box shadow to hexagon.
please help
You Can Use these code....
#hexagon{
background: red;
width: 100px; height: 60px;
position: relative;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.7);
box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
http://jsfiddle.net/jelmerdemaat/5UMxW/3/
Please visit the 'jsfiddle' Code, where the output can be seen. When hover displays the menu text, the background of the text field is transpernt + and lower zindex. I haven't set any transparency or zindex to the menu.
I have tried every possible technique to get it resolved but no luck.
.control-menu {
float: left;
width: 50px;
background-color: #F0F0F0;
height: 380px;
border-right: 1px solid #e0e0e0;
z-index: 100;
}
.control-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.btn {
position: relative;
display: block;
text-decoration: none;
background-color: #e0e0e0;
padding: 15px 20px 10px 20px;
text-align: center;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
text-shadow: #666666 1px 1px 1px;
}
.btn-name {
display: none;
border-top: 1px solid #f0f0f0;
padding-top: 16px !important;
}
.btn:hover .btn-name {
display:inline;
background-color: #e0e0e0;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
}
.btn.active {
background-color: #F0F0F0;
border-bottom: 1px solid #f00;
}
.btn.active:hover .btn-name {
background-color: #F0F0F0;
border-bottom: 1px solid #f00;
}
can someone please guide solution?
just add
z-index:200
to the .btn, didn't change any positioning fiddle
just add position: relative; and z-index: 1000;
.btn:hover .btn-name {
display: inline;
background-color: #e0e0e0 !important;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
position: relative;
z-index: 1000;
}
in the btn:hover .btn-name add position relative and z-index: 1
.btn:hover .btn-name {
/* add this */
position: relative;
z-index: 1;
/* you code */
display: inline;
background-color: #e0e0e0 !important;
width: 100px;
padding: 17px 20px 12px 0;
margin: 0 0 1px 0;
border-right: 1px groove #f00;
}
here the fix : jsfiddle
I have some weird problems trying to float stuff to the left. I tried to clear it with the easy clearing method but its still not working. See any problems? I'm trying to float article
Heres the CSS
#main-wrap { margin: 0 auto; width: 960px; }
/* Navigation */
nav { background: #2f2f2f; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .4); box-shadow: 0 1px 0 rgba(255, 255, 255, .4);
float: right; width: 473px; }
nav ul { padding: 10px; }
nav ul li { display: inline; border-right: 1px solid #000; border-left: 1px solid #686868; margin: 0 -4px 0 0; padding: 0 14px 0 14px; }
nav ul li:first-child { border-left: none; }
nav ul li:last-child { border-right: none; }
nav ul li a { color: #fff; letter-spacing: 1px; text-shadow: -1px 0 1px #000; }
/* Logo */
#logo-wrap { background: url(../images/logo.png); display: block; position: relative; right: 156px; top: 2px; z-index: -1; height: 718px; width: 733px; }
/* Main Content */
article { float: right; width: 482px; }
Heres the HTML.
#logo-wrap is just one big image.
What about set
article { float: left; width: 482px; }
to float: left; and not float: right; ?
look here:
http://jsbin.com/ofizu5/2
Hope this will help you? If not describe a bit more precise your problem :)