I am making my first steps learning html, css and php. I made some courses on internet and now I decided to make a site using Wordpress so I can continue learning from the practice.
The thing is that I made a page with a custom field for a video and a custom field for a description.
As you can see in the picture I'm hiding all the text of the description using a details tag called About in html.
When I click on about I see this:
And there is my question:
How can I hide some elements when other elements are displayed? I would like to open this page and only see the text and a close button. It means that when details is open, the page should not display the "menu" link and the "strange magic" title.
I already tryied this but it doesn't work:
details[open] .entry-title .menu-toggle{
display: none;
}
Do you have some suggestion? It is something possible to do using css?
I think you should try this, maybe it will help you..
label {
display:block;
margin:20px 0 10px 0;
}
label:hover {
text-decoration:underline;
}
input {
position:absolute;
left:-999em
}
.hide {
width:50%;
border:1px solid #000;
background:rgba(148, 148, 148, 0.33);
box-shadow: 3px 3px 10px;
max-height:999em;
opacity:1;
height:auto;
overflow:hidden;
transition:opacity .5s linear;
}
.hide p {
padding:10px;
margin:0
}
input[type=checkbox]:checked + div {
opacity:0;
max-height:0;
border:none;
transition:opacity .5s linear, max-height .5s linear;
}
.follow{
border-top:1px solid blue;margin:0;
}
Demo: https://jsfiddle.net/Pratik_009/t41nn2nh/
Related
I'm trying to increase the duration of CSS :active and found this thread How to increase the duration of :active in css? I tried this but it didn't work on my code.
here my code:
li {
transition:0s 1s;
}
li:active:before {
content:"hello !";
z-index:99999999;
position:fixed;
bottom:0px;
width:100%;
background:black;
text-align:center;
color:white;
padding:10px 0;
transition:0s;
}
<li>Style This</li>
the :active rule will stop matching as soon as the mouse button is released. thus the :before will be removed.
You could render the block, and not display it until the :active starts matching.
caveat: If the :before block is clicked, its parent will also become active.
In the end, I would opt for a JavaScript solution.
li {
transition:0s 1s;
}
li:before{
content:"hello !";
z-index:99999999;
position:fixed;
bottom:0px;
width:100%;
background:black;
text-align:center;
color:white;
padding:10px 0;
transition:1s;
opacity:0;
}
li:active:before {
display:block;
opacity:1;
transition:0s;
}
<li>Style This</li>
The trick won't work as you expect simply because there is no transition applied to the li element.
You need first to understand how it works. Here is a simple example:
.box {
background:red;
height:200px;
transition:0s 1s;
}
.box:active {
background:green;
transition:0s;
]
<div class="box"></div>
When you click, the active state is considered; thus the transition is set to 0s and the background become immediately green. When you release the mouse, the active state is no more considered and we have the new transition with a dely so the the background go back to red after this delay.
So in order to have such think, you may consider doing the same but with the pseudo element:
li:before {
content: "hello !";
z-index: 99999999;
position: fixed;
bottom: 0px;
width: 100%;
background: black;
text-align: center;
color: white;
padding: 10px 0;
opacity:0;
transition: 0s 4s;
}
li:active::before{
opacity:1;
transition: 0s;
}
<li>Style This</li>
I considred opacity but it can work with any animatable property.
Here is a code from W3Schools on how to create a ripple effect button.
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 50%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 15s;
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
Can someone help me understand the code bit by bit, especially why the padding and margin in the button:after are so highly set and how the zero values in the button:active:after affect the animation?
Any help will be highly appreciated. (I know the basic of padding and margin, but I think that I am not getting the 'after' class and the technique used).
:after is not a class is a pseudo-element that it's used to add content to the content of an element .see here ::after
so it uses that pseudo-element to create a new space with CSS that it's not defined in your initial HTML . it's like making another element inside the button
for eg if you had a structure like this :
.no_pseudo, .with_pseudo {
width:100px;
height:100px;
background:red;
margin:40px 0
}
.likeAfter {
background:blue;
width:50%;
margin:0 auto;
height:100%;}
.with_pseudo {
position:relative;
}
.with_pseudo:after {
content:"";
position:absolute;
background:blue;
width:50%;
margin:0 auto;
height:100%;
lefT:0;
right:0;}
<div class="no_pseudo">
<div class="likeAfter">
</div>
</div>
<div class="with_pseudo">
</div>
as you can see, the :after element can be used just like a child element inside a div. but you can achieve that just by using CSS .you don't have to change the HTML structure.
so this trick is using :after , which has a background: #f1f1f1; and it's positioned under the button ( margin-top:-120% ) . and then, when you click on the button , it has (margin:0 ) that's how this effect is done
also with paddings and opacity.
i would've done it differently :
.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
z-index:2;
}
.button:after {
content: "pseudo element >!<";
color:green;
background: #f1f1f1;
display: block;
position: absolute;
bottom:0;
left:0;
height:0%;
width:0%;
opacity: 0;
transition: all 3s;
}
.button:focus:after {
width:50%;
height:100%;
opacity: 1;
}
<button class="button">
I AM A BUTTON
</button>
i positioned the :after at the bottom-left of the button , with width:0%;height:0%;opacity:0 ;
then, when i click on the button, i added width:50%;height:100%;opacity:1 on the :after and that's how you get that effect . maybe is not exactly the same as in your example but it works.
also added some content:"" to the :after element. you can add text,images etc. almost anything. but if you don't want to add anything, you must use content:"" and leave it empty, otherwise the :after is not created.
:before is the same as after > see here more about pseudo elements
css_pseudo_elements or here Pseudo-elements
there is much to talk about this things, but i hope you kind of understood what's going on with the pseudo-elements and with this effect. let me know. cheers !
EDIT AFTER COMMENT :
1. ' transition backwards ' is because of the :active state ( :active ) . the button has the :active state only when you click on it . after that it's not active anymore and :after goes back to it's original style
and because it has transition:15s it takes 15 sec to get back to it's original position and color.
the same with the ripple effect. you click on the button, the effects starts , :after gets from one style to another , for example from opacity:0 to opacity:1 then because the button doesn't have :active state anymore, :after returns to it's original style of opacity:0 , all this happens in 15 seconds ( because of the transition:15s )
2
content:"" inserts the space for the :after or :before into the HTML structure
you need content:"" on :after because , as i said in the beginning ,
::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is
key word content . so even if you don't insert text or images but you just want to insert an empty space , you need to set up a content:"" which means empty but still there .
elem:after{content:""} generates a space with width:0;height:0 after the element.
i will make two short examples , one with something inside content:"" one with nothing inside it
h1:before {
content:"i am before < < < ";
font-size:14px;
color:red;
}
h1:after {
content:" > > > i am after";
font-size:14px;
color:blue;
}
h2:before {
content:"";
background:red;
width:20px;
height:20px;
position:absolute;
}
h2:after {
content:"";
background:blue;
width:20px;
height:20px;
position:absolute;
}
<h1>Text Before me </h1>
<h2>Just empty content </h2>
I would like to make div css background hover effect on my very top menu to white(#fff).
It's not a menu link. It's background(rectangular a little bit transparency table. A full width).
If you use F12, you can see 'div.top-strip.color-site-white'.
My site is http://www.samgyoyu.com/. And I would like to make hover effect like this site. http://www.herschelsupply.com/.
Thank you and have a nice day:)
add following line to your css
#secondary-nav ul li:nth-child(n+2) a:hover
{
color: black;
border-bottom: 2px solid black;
}
Make the background color as transparent
#masthead .color-site-white {
background-color:rgba(255,255,255,.5);
position:fixed;
left: 0;
right: 0;
}
#masthead .color-site-white:hover {
background-color:rgba(255,255,255,1);
}
For IE 7, 8 - This will not support (RGBA) so you must use a png transprent image for background and div:hover also not support for IE so u must use javascript for that.
$("#masthead .color-site-white").hover(function(){
$(this).css({background:'white'});
})
add these lines to your div
.top-strip color-site-white {
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
.top-strip color-site-white:hover {
background-color: #whatever...
}
I am trying to sort out my navigation div. I am having a whole variety of problems and I have been trying to sort them out for hours. I am a rookie programmer so please forgive me.
First here is a snap of my css
#navigation {
background: rgba(109, 183, 229, 1);
display: block;
position: static;
height: 40px;
width: 96%;
padding: 1% 2% 0% 2%;
clear: both;
border-style: solid;
border-color: #31679a;
border: 0% 0% 1% 0%;}
The border isn't behaving, because it is displaying it all the way around even though I clearly specify 0% for 3 sides. (SOLVED: changed to border-width, and changed % to px as border doesn't allow %)
Next I can't seem to center it perfectly in the middle. I've tried all sorts of things, but I can't seem to get it to function properly. (SOLVED: Magesh and Adam both provided good solutions to this problem, however Adam's achieved my desired results much easier)
I can't seem to get it to not be squeezed when resizing the window. This used to work, but after a couple of changes, it has stopped. I want it to disappear when the width is too small.
I feel like this will be a silly question, and the answer will be a small % here and there I have overlooked. But it is becoming very frustrating. (You may also notice the main body is overflowing over the border I've put at the bottom - no idea why). I will be extremely greatful for any help here.
EDIT: Sorry, I forgot to add. View it here: www.dweeman.com/eb/sitetemplate.html
EDIT: I've created this fiddle for you
NOTE: This answer is for your centering problem
HTML:
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Gallery</li>
</ul>
CSS
ul{
display:table;
width:100%; /*This ensures that the element covers the entire width*/
text-align:center; /*To center the text*/
list-style:none; /*Remove the bullets*/
margin:0; /*Remove margins*/
padding:0; /*Remove extra padding*/
}
ul li{
display:table-cell;
}
See here for example -> Click here
Warning : This is just for example, you could style this better.
Direct Solution: Replace this code with the code on your website,It'll work perfectly :)
#ddmenu {
display: table;
width: 100%;
text-align: center;
background: #31679a transparent;
border-radius: 0.125em;
cursor: pointer;
color: #8aa8bd;
}
#ddmenu li{
display: table-cell;
font-size: 1.20em;
text-shadow: 1px 1px 0 #fff;
border-right: 0px solid #dae0e5;
}
#ddmenu li a {
display: block;
padding: 0 0.750em;
line-height: 1.40em;
font-weight: bold;
text-decoration: none;
color: #31679a;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
If you remove the width:100% from the #ddmenu and then put a text-align:center on #navigation that should centre the menu.
To make it stop scaling down at a certain width you can use a min-width
#navigation {
min-width:700px;
}
To make it completely disappear at a certain width you can use a media query in your css. Insert it at the end of your main css.
#media only screen and (max-width: 700px){
#navigation {
display:none;
}
}
im working on this site at the moment and and cant figure out why this shouldnt work..
Im looking to put small borders on the bottom and top of each controlnav link (seen on the right of the slides), If anyones got any pointers itd be great...
http://limerickfc.hailstormcommerce.com/cms/
.nivo-controlNav a + a {
border-top: 1px solid #000000;
}
I will just include a small bit more css for clarity so you can see what im talking about...
.nivo-controlNav {
text-align:center;
position:absolute;
right:-180px;
height:474px;
width:180px;
top:0px;
z-index:8;
}
.nivo-controlNav a {
cursor:pointer;
height:68px;
padding: 13px 20px;
width:140px;
display:block;
background: url('http://limerickfc.hailstormcommerce.com/cms/wp-content/themes /limerickfc/images/slideshowBg.jpg') scroll 0 0 transparent;
background-repeat: repeat-y;
color: #6ED5FF;
}
Thanks!
Having looked at the attached page using Firebug you have this style declared in your inline stylesheet
#slider a {
border: 0 none;
display: block;
}
If you remove the border: 0 none; line the border will appear, it is currently overriding your NivoControlNav style.
There are two offending CSS rules
.nivoSlider a {
border:0;
display:block;
}
Your selector, .nivo-controlNav a + a has slightly more specificity than .nivoSlider a, so yours should win out. However, there is also this rule:
#slider a {
border:0 none;
display:block;
}
The ID in this rule gives it much more specificity than yours. Either remove the border property from this rule, or add an ID to your selector to give it more specificity.
More on CSS selector specificity.