I have the following code :
<!DOCTYPE html>
<html>
<head>
<title>Void Museum</title>
<meta charset="utf-8">
<style type="text/css">
html * {
margin: 0;
padding: 0;
}
#panel,
#content {
position: absolute;
top: 0;
bottom: 0;
}
#panel {
left: -220px;
width: 250px;
background: #030;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#content {
left: 250px;
right: 0;
background: #003;
}
#panel:target {
left: 0;
background: red;
}
#content:target {
background: yellow;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="panel">
LEFT PANEL
</div>
<div id="content">
CONTENT
</div>
</body>
</html>
And two questions :
Why isn't the panel coming out when i click on it ?
How could i force the #content block's left property to 250px when #panel is targeted ? Should i change all this to use relative positions ? If so, how would i force #content not to overflow of the right side of the page ?
This code does work when i use :hover instead of :target so i assume there's something i don't understand about :target.
Thanks in advance :)
The reason it isn't working is because you are using :target as "is-clicked" or similar, which doesn't exist. In CSS, something that can mimic that behaviour is the following:
You make a href to an id (e.g. #panel) and then click it. Now you have a #panel on your url and can start using :target
See here
The text links to #panel, activating :target and allowing it to work as if it was "clicked".
Related
guys i'm struggling these days with understanding the toggle switch code i found this on google and i'm trying to understand the code to strengthen my css skills
please help me and thank you in advance.
1.why this person put the transition declaration when the toggle switcher can work without it ?
2.why we should use the adjacent combinator and not any other combinator? i tried the descendant combinator and it doesn't work i wanna know why?
this is the HTML code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
<title></title>
</head>
<body>
<label class="switch">
<input type="checkbox" class="input">
<span class="slider"></span>
</label>
</body>
</html>
and this is the CSS:
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch .input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;*/
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
**i understand that here it's necessary for the cool effect of the transition but above i don't see why we used it?**
-webkit-transition: .4s;
transition: .4s;
}
.input:checked + .slider {
background-color: #2196F3;
}
.input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
.input:checked + .slider:before {
transform: translateX(26px);
}
1. The transition on the toggle
That's totally up to the person designing the site. If the code works fine without it then you're fine to remove it if that look/feel doesn't appeal to you.
2. Why the adjacent?
In this case using the adjacent combinator ensures that only the .input that belongs to .switch is going to be impacted by whatever styles are declared. This would be done in case the .input class is going to be called many other times throughout the page. The other instances of it would all retain the default styles for that class while the one within the .switch class would have the unique styles.
1. The transition declaration for .slider is used to transition its background-color property, it's a subtle effect that you may have not noticed.
2. The descendant combinator couldn't indeed work in that case as the .slider span is not a descendant of the checkbox, but adjacent to it. Another selector you could use in that case instead is the sibling ~ selector, with a similar result.
I'm new with CSS3 animation and I'm trying to create a simple animation with image sequence using 164 images in the DOM and CSS keyframes to show each one in order.
Everything is working very good but the animation is not running completely, it just show the first 60 images with a duration of 2 seconds.
In fact, if I increase the height in my animation object I can see the other images running the animation in the down side, like if it splits the animation in 3 parts of 60 images each one.
Here is the code that I'm using.
Is it possible that maybe HTML5 only can use 60 images and only show 2 seconds?
I would appreciate some help with this.
index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Animation test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="animation-object">
<div class="animation-object__strip">
<img src="images/image1.png">
<!-- Bunch of images of sequence here -->
</div>
</div>
</body>
</html>
CSS file:
html{
background: #ffd25c;
}
.animation-object {
width: 640px;
height: 960px;
display: block;
position: relative;
overflow: hidden;
margin: 0 auto;
}
img {
width: auto;
height: auto;
display: inline-block;
position: relative;
}
.animation-object__strip:nth-of-type(1){
width: 34040px;
display: block;
font-size: 0;
overflow: hidden;
position: relative;
animation-timing-function: step-start;
-webkit-animation: intro 2s steps(30) infinite;
animation: intro 2s steps(30) infinite;
}
#-webkit-keyframes intro {
from { -webkit-transform: translateX(0px); }
to { -webkit-transform: translateX(-19200px); }
}
I have created a HTML page. There is a background image in my page. I want to change the opacitry of my background
i.e. opacity of image used in background. I am using this code to add a background image to my page:
<!DOCTYPE html>
<html>
<head>
<style>
body{background-image: url('IMG_18072014_115640.png')}
</style>
</head>
<h1>Hello world!</h1>
<body>The background image will be shown behind this text.</body>
</html>
How can I change this code to change the opacity of this background image.
Apply background-image to body's :after :pseudo-element and change its opacity, so that the body's content is not affected.
body, html {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
}
body:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(http://www.lorempixel.com/600/400);
opacity: 0.3;
z-index: -1;
}
<h1>Hello world!</h1>
<body>The background image will be shown behind this text.</body>
I think you misunderstand some things in html,
but one simple solution would be to make a transparent background image... (PNG24 transparency)
Try this way to change opacity of psudo element : DEMO
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(http://s.hswstatic.com/gif/evil-robots-3b.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
I'm using bootstrap's affix plugin here
HTML:
<html>
<head>
...
<style>
h1 {
width: 100px;
height: 100px;
background: green;
margin: 0;
top: 10px;
}
h1.affix {
top: 8px;
}
body {
padding: 10px;
height: 5000px;
}
</style>
</head>
<body>
<h1 data-spy="affix" data-offset-top="10">yo!</h1>
</body>
</html>
Whenever I scroll down for a considerable distance (using scroll on the right, not the mouse scroll), the div jumps. How can I prevent that? Apperantly the problem is div scrolls up beyond the screen, then it's applied a fixed position and it moves down causing it to jump. I tried using transition to make it jump smoother, but for some reason it didn't work.
h1 {
width: 100px;
height: 100px;
background: green;
margin: 0;
transition-property: top;
transition-duration: 3s;
}
How can I fix this?
Try this:
Use affix class
<h1 class="affix">yo!</h1>
Now it will not jump !
finally figured out the result , used both js and css together to work,
thanks guys :)
FINAL JSFIDDLE CODE
find codes below
i have made an example with using other codes, to display 'info <DIV>' to show up when mouseover on image, but i m having problem when i try to show "caption <DIV>" over the image. i have tried to add codes in the css but anything i do stops "info <DIV>" to show up :(
can some one please look into this set of code :jsfiddle
and if the "info <DIV>" can be displayed in a separate <div> it would be great help.
thanks
regards.
code html
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" class="team"/>
<div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div>
<div class="caption">SYMBOL</div>
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png" alt="" class="team"/>
<div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div>
<div class="caption">STAR</div>
CSS code
.team , .info{
background: #151515;
height: 150px;
width: 150px;
}
.info{
background:white;
height: 50%;
width: 20%;
display:none;
position: absolute;
top: 10px;
right: 10px;
}
.team:hover + .info {
display:block; }
.team {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.team:hover {
opacity: 0.5;
}
Its unbelievable what CSS is capable of doing - but don't abuse it too much. There has been some really fancy widgets and templates I have seen done entirely in CSS (which is great) but I would suggest to be careful when you "hack" CSS vs. using javascript. IMHO this is a css hack:
.team:hover + .info {
display:block;
}
It is OK to use CSS to change the style/display of an element NESTED within that element for instance:
<div>
<a class="close" href="#">Close me</a>
</div>
When you hover over <div then a.close should show up (display: block;).
In your specific case - you are using css to change a NON-NESTED element's display. Using javascript is recommended instead of a css hack because if you ever (and most likely you will) want to enable a user to move their mouse away from the picture and hover over the caption div and highlight text, click on link... etc. you will HAVE to use javascript. CSS is limited in its capabilities and its complexity greatly increases when you use transcend beyond its intended purposes.
As such, I recommend javascript (w/ jquery or other library).
I added the caption class in the css and styled the caption.
In your code the caption would stay under the image. Then i set the position:relative and set the position of 20px from the bottom. I gave it a background-color:red in order to let you see where it is located. I also gave the caption a width of 150px as the width of the images. You used the classes team, info and caption. In order to target the mouseover function separetely in every image i created 2 different kind of classes for every image, so: team1, team2, info1, info2, caption1, caption2. If you use want to use 3 images on your webpage you'll have to add team3, info3, caption3 and so on, in your html, css and jquery function. (You can just copy and paste and rename). i added a parent div with id image that wraps every image and gives relative positioning. You can edit the code as you want.
Here is the edited HTML:
<div id="image">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols- Critical-icon.png" class="team1"/>
<div class="info1">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol" <BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol" <BR>"this is a symbol"<BR></div>
<div class="caption1">SYMBOL</div>
</div>
<div id="image">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols- Favourite-1-icon.png" alt="" class="team2"/>
<div class="info2">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div>
<div class="caption2">STAR</div>
</div>
Here's the edited CSS:
.team1 {
background: #151515;
height: 150px;
width: 150px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.info1{
background: white;
height: 150px;
width: 150px;
visibility:hidden;
position: absolute;
top: 10px;
right: 10px;
}
.team2{
background: #151515;
height: 150px;
width: 150px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.info2 {
background: white;
height: 150px;
width: 150px;
visibility:hidden;
position: absolute;
top: 10px;
right: 10px;
}
.team1:hover {
opacity: 0.5;
}
.team2:hover {
opacity: 0.5;
}
.caption1 {
position:relative;
background-color:red;
width:150px;
bottom:20px;
visibility:hidden;
}
.caption2 {
position:relative;
background-color:red;
width:150px;
bottom:20px;
visibility:hidden;
}
#image {
position:relative;
}
Then i added some jquery functions that you can put in the body of your html page after the other html code:
$(".team1").mouseout(function () {
$(".caption1").css("visibility","hidden");
$(".info1").css("visibility","hidden");
});
$(".team1").mouseover(function () {
$(".caption1").css("visibility","visible");
$(".info1").css("visibility","visible");
});
$(".team2").mouseout(function () {
$(".caption2").css("visibility","hidden");
$(".info2").css("visibility","hidden");
});
$(".team2").mouseover(function () {
$(".caption2").css("visibility","visible");
$(".info2").css("visibility","visible");
});
In order to use the jquery functions you have to include the jquery library in your page by inserting: <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> in the head of your HTML page, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>
Here's a demo on jsfiddle
Final code
html
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
.team img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
.team .caption {
position: absolute;
bottom: 1px;
right: 0px;
width: 100%;
height: 25%;
display: none;
z-index: 2;
text-align: right;
color: #ffffff;
padding: 10px;
background: rgba(0, 0, 0, .75);
}
.team .caption a {
color: #ffffff;
}
</style>
<body>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.team').mouseover(function() {
$(this).find('.caption').fadeIn(100);
});
$('.team').mouseleave(function() {
$(this).find('.caption').fadeOut(100);
});
});//]]>
</script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.team').hover(function() {
$(this).find('.info').fadeIn(100);
});
$('.team').mouseleave(function() {
$(this).find('.info').fadeOut(100);
});
});//]]>
</script>
<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" >
<div class="caption">SYMBOL</div>
<div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div></div>
<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png">
<div class="caption">STAR</div>
<div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div></div>
</body>
css
.team {
background: #151515;
height: 150px;
width: 150px;
position: relative;
}
.info{
background:white;
height: 100%;
width: 100%;
display:none;
position:fixed;
float:right;
top: 0px;
left: 70% ;
z-index: 99;
}