I'm using a transparent png file for the background for my h2 and h4 elements it has a shadow at the bottom which I'd like to appear over the featured images like you can see here: https://redpen.io/epqvnw
Right now on the site http://www.mediray.co.nz/preview the h2 background is cropped. I've worked with inspect element exhaustively. At some point I could get it on top but it lowered the opacity of every other element on the page. I am using background-color: rgba(0,0,0,0.6); for my site-inner I guess they're must be a conflict.
Any help or direction would be greatly appreciated. If I wasn't clear enough or you need further information please let me know.
Add position: relative and z-index: 1 in dynamik.css at line 1457
#ez-home-container-wrap .ez-widget-area h4,
#ez-home-slider-container-wrap .ez-widget-area h4 {
border-bottom: 0px solid #DDDDDD;
color: #838383;
font-family: 'Open Sans', sans-serif;
font-size: 22px;
font-size: 2.2rem;
position: relative;
z-index: 1
}
I'd suggest simply using an invert box-shadow on the image, creating the illusion of a shadow being cast by the heading. Like so:
box-shadow: inset 0px 10px 5px -5px rgba(50, 50, 50, 0.75);
jsfiddle: http://jsfiddle.net/jtFb8/
Or if you don't want to use CSS3 then put the shadow on the top of the image rather than the background of the header.
Related
I am designing a custom arrow (using background image) for a group of select boxes.
Problem is that each select box should be very short in width and therefore if the text is longer than this width it appears over the background arrow.
I need to find a way to display the background image over the text.
The other problem is that there are about 500 such select boxes and I do not wish to add a span layer in the HTML code for each of those boxes to accomplish the goal.
Therefore I am looking for a CSS solution only. JS would not work either.
Here is the CSS:
.dropdown{
width:57px;
border: 1px solid #cfcfcf;
height: auto;
border-radius: 5px;
padding:3px 4px 4px;
position: relative;
z-index: 0;
overflow:hidden;
}
.dropdown select{
border: none;
background-color: transparent;
outline: none;
padding: 1px 0 0 5px;
width:145%;
background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right;
background-position: 55%;
}
JSFiddle here:
http://jsfiddle.net/pazzesco/r6c9zcpc/
Any comments or ideas will be greatly appreciated.
Have you considered just increasing the right padding on your .dropdown selector to say 10px?
padding:3px 10px 4px; should make sure your text never overlaps over the arrow.
Or do you actually want the text to display behind the arrow (which won't work as you've got the arrow as a background image)? :)
I hope I haven't misunderstood the question!
Cheers
Ines
Just increase padding-right values by 30px.
.dropdown select{ padding: 1px 30px 0 5px; }
Result: This will clip the text; 30px from right side.
JSFiddle Here: [http://jsfiddle.net/nvishnu/Lq7hosrd/2/]
I am trying to create a banner effect using just CSS and no images. The result is supposed to look like this:
This example was created using the html and CSS in this jsfiddle. This is the CSS for the banner (.widget-title):
.widget-title
{
background-color: #B1DDC9;
color: white;
height: 24px;
text-align: center;
}
.widget-title:before
{
content: "";
float:left;
width: 0px;
height: 0px;
border-style: solid;
border-width: 12px 0px 12px 12px;
border-color: #B1DDC9 #B1DDC9 #B1DDC9 white;
}
.widget-title:after
{
content: "";
float:right;
width: 0px;
height: 0px;
border-style: solid;
border-width: 12px 12px 12px 0px;
border-color: #B1DDC9 white #B1DDC9 white;
}
This seems to work fine on all the browsers I've tested on my desktop and phone. Both Safari and Chrome on my Ipad2 however render a faint thin line on the left and right outer edges of the banner:
What is causing this phenomenon? Is there anything I can do to resolve it?
This looks like it is the background colour bleeding through at the edge of the triangle, probably due to some kind of sub-pixel rendering quirk. From your CSS this shouldn't be happening, as the triangles should be butted up against the edges of the title, but that's CSS for you ;)
Not sure if it'll work for you, but you could try putting position:relative on the title and position:absolute on the two triangles, with the relevant left:0 and right:0 to position the where you want them. In my experience this is generally more reliable than floating in terms of where your elements will end up.
As a side note, you could use border-color:transparent for the three sides you don't want to display. This would also allow you to make the triangle one pixel bigger and overlap the left/right by a pixel (i.e. left:-1px). That should definitely sort your problem.
Try changing border-width: 12px 0px 12px 12px;
to border-width: 12px 2px 12px 12px;
Maybe this will extend the "back" of the triangle just off the banner and get rid of the line
I am having some troubles in styling the top dropdown menu here so that it creates a toggle effect. I am using padding to delimit the hover area but then there is no chance I can hover over the submenus.
#topmenu {
background-color: rgba(0,0,0,1);
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 20pt;
position: fixed;
width: 100%;
top: 0;
}
add z-index: larger-number to #topmenu to make sure the menu is always on the top level, so it can be hovered.
css transform will change the z-index order. you used it on the h2. it covered the submenu.
in actully, change nothing, but scroll down your page. you'll find the hover issue on menu gone.
Demo for rotate element covered absolute element:
http://jsfiddle.net/rainthinks/xswrg/
the fix: http://jsfiddle.net/rainthinks/xswrg/1/
some refs:
http://daneden.me/2012/04/css-transforms-and-z-index/
http://www.w3.org/TR/css3-2d-transforms/
Make the padding and margins 0; and also give the code so that I could understand any other problem.
I'm having a bit of an issue with Firefox. I have implemented the following rule:
h1.entry-title {
font-family: "meddon"; color:white;
padding: 10px 0 25px 0;
margin: 0px;
background-image: url(images/backgrounds/h1.png) no-repeat bottom 0px;
}
Yet in Firefox it doesn't show fully. Using Firebug, it shows an incomplete rendition of this style. The following is rendered:
h1.entry-title {
color: white;
font-family: "meddon";
margin: 0;
padding: 10px 0 25px;
}
Not sure why the other declarations are not showing up, ie, the background image is not there. Also note that padding should have 4 numbers not three. Any ideas?
background-image only takes an image source, not a list of parameters. You're looking for just plain background
Here's a link to the background property
As for the padding, the 3 parameter syntax translates to top, right & left, bottom. The four number syntax translates to top, right, bottom, left. So it's doing the same thing.
Try This
h1.entry-title {
font-family: "meddon";
color:white;
padding:10px 0 25px 0;
margin: 0px;
background:#fff url("images/backgrounds/h1.png") no-repeat bottom }
because you used an invalid background-image value, the style will not show up.
As for the padding, firebug uses abbreviations whenever possible:
padding: all;
padding: top/bottom left/right;
padding: top left/right bottom;
padding: top right bottom left;
Is it possible to get cut out text effect like this using CSS/CSS3 only? or image is the only option to get this effect.
This should work:
Here's a little trick I discovered using the :before and :after pseudo-elements:
http://dabblet.com/gist/1609945
text-shadow is your friend. See this page for lots of examples what you can achieve with it. Example #8 looks promising.
I found this
http://jsfiddle.net/NeqCC/
It supports white background and dark text
All credit goes to the creator
HTML
<!--
CSS3 inset text-shadow trick
Written down by Jyri Tuulos
http://about.me/jyrituulos
Effect originally found at http://timharford.com/
All credits for originality go to Finalised Design (http://finalisedesign.com/)
Note that this trick only works for darker text on solid light background.
-->
<h1 class="inset-text">Inset text-shadow trick</h1>
CSS
body {
/* This has to be same as the text-shadows below */
background: #def;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
}
.inset-text {
/* Shadows are visible under slightly transparent text color */
color: rgba(10,60,150, 0.8);
text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }
What you really need for that particular effect is inset:
text-shadow: inset #000 0 0 0.10em; /* THIS DOESN'T WORK */
Unfortunately: "<shadow> is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed."
You can use the text-shadow style to set a shadow for the top left corner. It will look close to what you are looking for, but as far as I know there is no way to do exactly what you are looking for in CSS/CSS3
Yes you can achieve this effect with CSS and text, but it's a little insane. Basically you create a bunch of grey-zero css3 radial and linear gradients with a zero opacity and carefully position them over your text. But you'd be better off doing this in photoshop.
A slightly softer way of using the pseudo-elements Web_Designer mentioned:
.depth {
display: block;
padding: 50px;
color: black;
font: bold 7em Arial, sans-serif;
position: relative;
}
.depth:after {
text-shadow: rgba(255,255,255,0.2) 0px 0px 1.5px;
content: attr(title);
padding: 50px;
color: transparent;
position: absolute;
top: 1px;
left: 1px;
}
It's a bit simpler - to get the soft rim of the depression you use the text-shadow of the :after pseudo and make it transparent, rather than using two pseudos. To my mind, it looks a lot cleaner too - it can work at much greater sizes. I've no idea how fast it is, though you'll probably be using text-shadow sparingly anyway.