Say I have the following in my CSS:
h1 {
font-family: Verdana;
font-size: 20pt;
color: Black;
z-index: 2;
opacity: 1.0;
}
#topFrame {
position: fixed;
top: 0;
left: 20%;
right: 20%;
height: 120px;
overflow: hidden;
border: 1px solid black;
background-image: url(dunno.jpg);
text-align: center;
vertical-align: center;
opacity: 0.5;
z-index: 1;
}
When I place the div with id "topFrame" in the HTML and then try to write a header using h1 tags, the header is as opaque as the image (so rather than being "stand-out" black it shows up as a dull grey.
Is there any way I can make it so that the h1 stands out in terms of opacity whilst still keeping the image semi-opaque, without creating an invisible div to house the header (if that makes sense)?
There is no real solution for this.
If you have a parent element having an opacity of 0.5, the child will have the same opacity.
One way to prevent this is to position your h1 tag on top of your #topFrame, and you will have to make sure the h1 is not a child of #topFrame
h1{ font-family: Verdana; font-size: 20pt; color: Black; z-index: 2; opacity: 1.0; position: fixed; left: 20%; right: 20% }
Something similair to that.
CSS Opacity is inherited to children. You could use a transparent PNG for the background of topFrame, you could mimic a parent-child relationship as shown in this: http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children article or else you'll be out of luck, I think.
Related
I am a novice as best please pardon me, but I'm learning.
I can illustrate what I need with an image.
Vertical Navigation 'White Curved Tab as Selector':
This is my CSS now, it's vertical and I can rotate the text, the way it should be, I'm not too concerned now about the visual appearance, I just need to have the functionality..
I would like the title of the pages in the navigation bar, to have an overlay icon, SVG or png, to hover over it when the mouse moves over and to continue following the mouse cursor within in the bounds of the nav bar, not like an ordinary overlay image, and if page is selected to leave that image or icon there as the highlight, so the final result will look something like the image above.
Here is my CSS thus far:
`.body{}
`.mobile-menu-nav.moved {
max-width: 75px;
width: 75px`
}
#head{
min-width: 100%;
padding:0px;
margin-left: -200px;
margin-right: -200px;
position:cover
}
#main-wrapper{
min-width: 100%;
padding:0px;
margin-left: -200px;
margin-right: -200px;
position:cover
}
.menu {
width: 60px;
height: 100%;
position: left;
border-radius: 15px;
border: 1px solid #00F;
}
.mobile-menu-nav li a {
font-family: Arial, sans-serif;
font-size: 12px;
color: #FFF;
background-color: transparent;
width: 100px;
height: 22%;
border: 1px solid transparent;
margin: auto;
margin-top: 50%;
margin-bottom: 50%;
margin-left: -15px;
position: center;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
-o-transform: rotate(-90deg);
`
https://sproutsa.co.za
Thanks much.
I think it would be the best to use ::after or ::before
.mobile-menu-nav li a:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: transparent url('../images/your_image.svg') no-repeat;
background-size: contain;
background-position: center;
}
I have added background size and position, but ofcourse style it as you need it. Using this solution you can manipulate images using background properties.
Second similar solution is:
.mobile-menu-nav li a {
display: flex;
}
.mobile-menu-nav li a::after{
content: url('../images/your_image.svg');
width: 20px;
padding-left: 8px;
}
SVG should contain itself inside after element, like background-size: contain; so it works fine, but it won't work for images (.png, .jpg) and you can't change those. You can only prepare .png image to be final size.
Use ::after or ::before depending on position you want icons to be, right or left.
I'm having an animated underline effect when user points the links on my website. The underline is a bit wider than the text itself, as there's a bit of horizontal padding.
Here's the effect I wanted to achieve and I did:
I was thinking if it was possible to simplify my code. After some trial and error, I used negative margin-left on the underline element and calc() to calculate its width as 100% + 2 * padding. It looks to me like an overcomplicated solution. Can the same effect be achieved without calc() and, perhaps, without negative margin?
Of note, adding a wrapper element is not an option. It needs to be a plain <a> element.
:root {
--link-color: #f80;
--link-underline-padding: .5em;
}
a {
color: var(--link-color);
display: inline-block;
padding: 0 var(--link-underline-padding);
text-decoration: none;
}
a:after {
background-color: var(--link-color);
content: '';
display: block;
height: .1em;
margin-left: calc(var(--link-underline-padding) * -1);
margin-top: .2em;
transition: width .5s;
width: 0;
}
a:hover:after {
width: calc(100% + var(--link-underline-padding) * 2);
}
I find dogs pretty cool.
A simple background animation can do this:
a {
background: linear-gradient(currentColor 0 0)
bottom left/
var(--underline-width, 0%) 0.1em
no-repeat;
color: #f80;
display: inline-block;
padding: 0 .5em 0.2em;
text-decoration: none;
transition: background-size 0.5s;
}
a:hover {
--underline-width: 100%;
}
I find dogs pretty cool.
Related:
How to animate underline from left to right?
How to hover underline start from center instead of left?
If you set a to position: relative; you can then use position: absolute; and left: 0px; to push it past the padding and then just use width: 100% to have it extend the entire length.
:root {
--link-color: #f80;
--link-underline-padding: .5em;
}
a {
position: relative;
color: var(--link-color);
display: inline-block;
padding: 0px var(--link-underline-padding);
text-decoration: none;
}
a:after {
position: absolute;
left: 0px;
background-color: var(--link-color);
content: '';
display: block;
height: .1em;
margin-top: .2em;
transition: width .5s;
width: 0;
}
a:hover:after {
width: 100%;
}
I find dogs pretty cool.
I want to have some list elements that got a dynamically adjusting height via css.
For better understanding: I am inserting via ::before a number that I count via counter-increment (thats the big ones)
Problem is that nothing that I tried so far brings me even close to what i want to archive. If you change the window size everything gets shoven down...
It should look like this:
I tried:
clear: both; on every element (except the li)
height: auto; on every element
I've already read through some posts but nothing really worked for me.
Dont ask why am I trying to get it done with css... ;)
Thanks for any help!
You have an absolute positioning on your image and thumbnail wrapper which is causing huge problems, look at the adjusted CSS below:
.page-id-3606 .product_thumbnail_wrapper .product_thumbnail a img {
position: relative;
clear: both;
}
.page-id-3606 .product_thumbnail a::before {
counter-increment: section;
content: "0" counter(section) "";
font-size: 10em;
font-weight: bold;
position: relative;
/* top: 100px; */
/* left: 50%; */
line-height: 0;
height: 100px;
width: 100%;
text-align: center !important;
box-sizing: border-box !important;
text-transform: uppercase;
color: #464646;
display: block !important;
border-bottom: 3px solid #464646;
/* transform: translate(-50%, 0); */
margin: 0 !important;
z-index: 10 !important;
}
I fixed it with a little help from Rich.
the missing height and top was causing the trouble:
.page-id-3606 .product_thumbnail_wrapper::before {
content:'';
background: url('...');
height: 130% !important;
width: 100%;
position: absolute;
z-index: 1;
clear: both;
top: -65px;
}
I have a div containing some text with individual letters having a background/border effect as illustrated in the screenshot:
Both the parent div and the individual numbers have a line-height of 1. See CSS below:
.jobcount {
font-weight: 300;
line-height: 1 !important;
-webkit-text-size-adjust: none;
vertical-align: top;
margin: 0 0 25px 0;
overflow: hidden;
b {
line-height: 1;
padding: 3px 4px 2px 4px;
-webkit-text-size-adjust: none;
font-weight: normal;
display: inline-block;
margin-right: 2px;
border-radius: 2px;
background: #A4CD39;
position: relative;
color: #016699;
&:before {
opacity: 0.2;
border-top: 1px solid #016699;
position: absolute;
content: "";
top: 50%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
margin: 0 auto;
}
}
}
On both mobile iOS and Android (less pronounced on Android, but still present) there is additional space below the numbers, causing the background to extend below where it is desired. For an example of how it should appear (and does on all 4 desktop browsers), see:
What am I missing on mobile browsers that is causing line height to differ?
Many bold fonts do have slightly different metrics than their non-bold counterparts. So one solution would be to find a font where the heights are identical for bold.
Or indeed, as David Millar mentioned in the comments, assign a height to the b element. If you do, make sure that you also give it display:inline-block or the height will be ignored.
Is there anyway to use CSS to achieve the above effect when mouse over on the button?
Thanks!
You can achieve what you are looking for by using a background gradient:
Create your gradient with two stops at 50%, your two colours on either side of the stops.
Make your background take up 200% the width of the element with background-size
Have your background position itself -100%
Move the background into position on :hover.
Note: Be sure to include browser prefixes where appropriate.
.menu{
padding: 20px 40px;
font-size: 32px;
font-family: Arial, sans-serif;
background: #F00;
display: inline-block;
background: linear-gradient(to right, #f8b3b5 0%, #f8b3b5 50%, #ffffff 50%, #ffffff 100%);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position 0.3s;
}
.menu:hover{
background-position:0 0;
}
<div class='menu'>Menu</div>
demo - http://jsfiddle.net/victor_007/1y2jw6wh/
added pseudo element :before and background-color
.menu {
padding: 20px 40px;
font-size: 32px;
font-family: Arial, sans-serif;
display: inline-block;
position: relative;
}
.menu:before {
content: '';
background: #FFADAD;
position: absolute;
width: 0%;
top: 0;
left: 0;
height: 100%;
transition: 0.3s linear;
z-index: -1;
}
.menu:hover:before {
width: 100%;
}
<div class='menu'>Menu</div>
There is, a working fiddle here: http://jsfiddle.net/84fpp167/
You basically make a wrapper div, position the div you want to slide absolute to it. Then you use the :hover on the wrapper div to transition the absolute position of the slide div untill the position is left:0 with a speed of 1 second.
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#slide {
position: absolute;
left: -100px;
width: 100px;
height: 100px;
background: #FFADAD;
transition: 1s;
height:100%;
}
.wrapper:hover #slide {
transition: 1s;
left: 0;
}
At first search the stack
You must read about css transitions, you will be use ease-in and background-color properties.
http://www.w3schools.com/css/css3_transitions.asp
Nobody gone code it for you, make an effort and do somethibg with your own.
The transitions showroom - http://codepen.io/davekilljoy/pen/wHAvb, mess with the code to make desired effect. Njoy !
Post with the similar problem :
form stack search 1
form stack search 2