I started to make my own gallery, and have one thing that cant resolve..
I want text that appear in part "UNSEREN DIENSTLEISTUNGEN" from homepage, from left in this site, to be showed in similar way in other images, but with image style like other pages (sppinin images).
This is code from first image:
<div class="serviceQuad">
<div class="tr-slideImgOut"><img src="/files/hjung2014/img/holzbau.jpg" alt="Holzbau" /></div>
<span class="figure tr-slideIn" href="">{{insert_content::26}}</span></div>
and this is image style from other images, (like i want to be, but text to appear inside box)
<div class="serviceQuad">
<div class="morph"><img src="/files/hjung2014/img/holzbau.jpg" alt="Holzbau" /></div>
<span class="morph" href="">{{insert_content::26}}</span></div>
Thanks for any help.
You can just add class with changed rotation style.
For example add fullRotate class like this:
HTML
<div class="serviceQuad">
<div class="tr-slideImgOut fullRotate">
<img src="/files/hjung2014/img/holzbau.jpg" alt="Holzbau" />
</div>
<span class="figure tr-slideIn" href="">{{insert_content::26}}</span>
</div>
And then add new rotation style for it:
CSS
.serviceQuad:hover .tr-slideImgOut.fullRotate img {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}
Related
In Figma, the element is given at an angle of 4.93 degrees (screenshot). The transform: rotate(-4.93deg) CSS property produces a result that looks different from the layout. How to insert this element into the page?enter image description here
html:
<div class="tape">
<img src="img/Frame.svg" alt="tape_at_an_angle" class="tape__img">
</div>
css:
.tape__img {
transform: rotate(-4.93deg);
}
I am working on a small Codepen project for practice, below is the code in question:
<div class="social-links">
<a href="https://twitter.com/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367287/twitter.svg">
</a>
<a href="https://medium.com/" target="_blank">
Link
</a>
<a href="https://medium.com/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367287/medium.svg">
</a>
<a href="https://medium.com/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367287/medium.svg">
</a>
</div>
The full code pen is here: http://codepen.io/SethHerning/pen/2ecd822daae0fecbdd7b6cafa664b6d7?editors=1100#0 (lines 18-32).
All the links work in Firefox and Edge, though the first two do not in Chrome or Opera. I've run the code through a validator and the only error is no alt attribute on the img tags. What am I missing that all the links are not working?
You're facing the 50% blocking issue defined in here: webkit transform blocking link
There's a workaround though, in your CodePen modify your css by adding the specific Chrome style -webkit-transform: rotateY(180deg) translateZ(1px):
.member:hover > div {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg) translateZ(1px);
}
This is the bug: https://bugs.webkit.org/show_bug.cgi?id=54371
I am using animate.css for a login form. It works except not the way I want it to work. Currently I am using fadeInDown but it fades in down from a longer distance that I want. It fades in from off the viewport versus just fading in about 20px. I hope that makes sense.
https://daneden.github.io/animate.css/
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<div id="login">
<div class="row animated fadeInDown">
<img src="logo.png"/>
<input type="text">
<input type="password">
</div>
</div>
Just overwrite the default fadeInDown animation to what ever you like.
If you take a look at the source on GitHub - animate.css/source/fading_entrances/fadeInDown.css you'll see that it is just a simple #keyframes rule. Just copy that and change the transform property to your needs.
In your case like so:
transform: translate3d(0, -20px, 0);
Here is an example changing the fadeInDown animation to appear from left to right instead of going from top to bottom, which makes no sense at all, but just to show you that it can be changed.
You could as well do a custom build and add your own animations or a helper class to change the offset.
#import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css');
#keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
<div id="login">
<div class="row animated fadeInDown">
<input type="text">
<input type="password">
</div>
</div>
http://jsfiddle.net/f5K6u/2/
Hi guys. Any idea on how to make the popup box appear once the site is open. Currently the popup box will only open once clicked. Can this be possible that the box would open once the site is done loading.
<span class="box">
<span class="title">Title</span>
<span class="copy">Pellentesque habitant morbi tristique senectus et netus</span>
If you simply want the pop-up to appear on page load itself (instead of after clicking on the button), make the <input> as default selected on page load itself by adding checked = 'true' to the tag.
HTML:
<input type="checkbox" id="linkie" class="popUpControl" checked='true'>
Note: The above doesn't show the animation/transition effect because it had no state transition. If you want the transition also to appear on page load, you have to initially leave the input as unchecked (like in your exisitng code) and then mark it as checked during page load using Javascript.
Javascript:
window.onload = function () {
document.getElementById('linkie').checked = true;
}
Demo without transition | Demo with transition
Extra Information for Understanding:
The below is the piece of CSS which triggers your box to appear.
.popUpControl:checked ~ label > .box {
opacity: 1;
-webkit-transform: scale(1) skew(0deg);
-moz-transform: scale(1) skew(0deg);
-ms-transform: scale(1) skew(0deg);
-o-transform: scale(1) skew(0deg);
}
The selector effectively indicates to the browser that when the element with class='popUpControl (.popUpControl) is checked (:checked) then the element with class='box' and has label as a parent should be made visible (using opacity). The scale, skew and opacity all together makes it get displayed whereas the transition set on the .box causes it to become visible in an animated/transitioned manner.
I'm trying to render a div with a set of small icon images laid out horizontally at the bottom of the div.
When the width of the total line of images is less than that of the containing div there isn't a problem. I'm using code like this:
<div class="main-div" style="position: absolute; width: 700px; height: 600px">
Text text text ...
<div class="icon-tray">
<img src="...">
<img src="...">
...
</div>
</div>
With the CSS for "icon-tray" as follows:
div.icon-tray {
position: absolute;
bottom: 0;
}
The "main-div" container is positioned with a fixed width and height; there's lots of space between the text at the top and the icons at the bottom.
The CSS above puts the "icon-tray" div of images all in a line at the bottom of the main div, which is just what I want.
However I've got a problem when the number of icons won't all fit on just one line. When that happens the rendered main div looks like this:
--------------
|text text text ...
|
|
|
|X X X X X X X
|X X
--------------
The "icon-tray" div lays out the images line by line starting from the TOP; whereas I would like the icons to be seen as 'filling up' the main div from the bottom upwards, like this:
-------------
|text text text ...
|
|
|
|X X
|X X X X X X X
--------------
I don't have a clue as to how I can go about this. How can I get the icons to be laid out from the bottom up?
Thanks for any help!
You can do this all with CSS - though you have to use some of the more non-standard properties. Since you have standardized to Firefox 3 though it shouldn't be a problem.
First you flip each image vertically, and then you flip the entire div vertically.
Also, I removed your bottom: 0px; style for div.icon-tray. There is no need for that with this method.
Here is the code I'm using:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
div.icon-tray {
position: absolute;
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
img {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
</style>
</head>
<body>
<div class="main-div" style= "position: absolute; width: 700px; height: 600px">
Text text text ...
<div class="icon-tray">
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
</div>
</div>
</body>
</html>
Seems a little obscure what you're trying to do.
Is this something you will want to be dynamic? If so, you should use some php to get number of images going to be displayed, divide by how many per row, then take the remainder and spit it out first.. somelike like that anyway.
If it's not going to be dynamic and just straight up html, would be easier to just abs position each image (considering your container div has a set width and height anyway?)
I think you'll have to resort to Javascript for this. I can't imagine any way to do it with CSS right now.
Here's what you could do with jQuery:
$(document).ready(function() {
var total = $('.icon-tray > img').size(),
maxperrow = 7, //edit this to the max. imgs per row
breakafter = total-parseInt(total/maxperrow)*maxperrow;
$('.icon-tray:nth-child('+breakafter+')').css({'clear':'left'});
});
The above is assuming you have your images set to float left.
edit: if you can do it server-side, even better. You can do the same math with PHP (for example) and don't have to rely on Javascript.
If you can use CSS3 (Chrome, IE9, Firefox4 this spring) then you can use:
http://dev.w3.org/csswg/css3-flexbox/
I'd recommend reading:
http://www.html5rocks.com/tutorials/flexbox/quick/
Browsers which don't support CSS3 will still get the top to bottom experience however. You'll have to ask yourself if the time investment in using jQuery to position each icon based on width is worth the trouble to support older browsers.