I have the cropWidth, cropHeight and the start co-ordinates of the image from which I need to crop.
How should I crop an <amp-img> using these information ?
For example, if the dimensions of the image is 10 X 10, and suppose cropwidth is 2 and cropheight is 3 and the start location is 3,5. This means I want the part of the image described by the rectangle with (3,5) as the top-left point and (5,8) as the top-right point.
The following is what I have tried and it is not working properly:
HTML code
<div style="width:400px;height:200px;position: relative;">
<amp-img class="cropped2" width="2px" height="1px" layout="responsive" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*">
</amp-img>
</div>
CSS code:
.cropped2 {
width: 100px; /* width of container */
height: 100px; /* height of container */
object-fit: cover;
object-position: 20% 10px;
border: 5px solid black;
}
Can someone tell why this is not working and give a working solution for the same?
Next time, try inserting the working code so that it can be run. Look at my example.
Like your code: I'm not sure if the option with layout= "responsive" and object-fit: cover is a good idea. Look at my example, I hope it will help you.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
#-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style><noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
<style amp-custom>
.wrapper {
margin: 15px;
position: relative;
}
.wrapper_one {
height: 100px;
width: 100px;
}
.wrapper_two {
height: 150px;
width: 300px;
}
.cropped2 img {
object-position: 20% 10px;
border: 5px solid black;
object-fit: cover;
}
</style>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<div class="wrapper wrapper_one">
<amp-img class="cropped2" layout="fill" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*">
</amp-img>
</div>
<div class="wrapper wrapper_two">
<amp-img class="cropped2" layout="fill" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*">
</amp-img>
</div>
</body>
</html>
Codepen: https://codepen.io/alexandr-kazakov/pen/ZEQxqKE
Also check out the examples on the official website:
https://amp.dev/documentation/examples/style-layout/how_to_support_images_with_unknown_dimensions/?format=websites
Related
When the screen width is less than 640px, the background is covered, why is the height not covered? And, It's work in Chrome and Edge.
.change{
background: #f00;
height: 100px;
animation: test1 1s linear forwards;
}
#keyframes test1 {
0% {
height: 100px;
}
100% {
height: 400px;
}
}
#media only screen and (max-width: 640px) {
.change{
background: #0f0;
}
#keyframes test1 {
0% {
height: 100px;
}
100% {
height: 200px;
}
}
}
jsfiddle
Looking at how the site behaves on Chrome, Firefox, and Safari, it seems that Chrome might be the only browser who deviate by attempting to reanimate the <div> after #media conditions are changed. Firefox and Safari thought that the animation is finished and no longer needed to reanimated.
As a workaround, you can force all web browsers to reanimate this by re-setting the .change animation properties under the #media scope and changing their values by a bit, such as by animating for 1.000001 seconds instead of 1.
.change{
background: #f00;
align-items: center;
font-family: sans-serif;
color: #fff;
height: 100px;
display: flex;
justify-content: center;
animation: test1 1s linear forwards;
}
#keyframes test1 {
0% {
height: 100px;
}
100% {
height: 400px;
}
}
#media only screen and (max-width: 640px) {
.change{
background: #0f0;
color: #00f;
animation: test1 1.000001s linear forwards;
}
#keyframes test1 {
0% {
height: 100px;
}
100% {
height: 200px;
}
}
}
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0' name='viewport' />
<body>
<div class="change">Some content</div>
</body>
</html>
This is pure.css framework (https://purecss.io/). I'm trying to copy a menu from their examples.
Documentation (and a working example): https://purecss.io/layouts/tucked-menu-vertical/
html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://unpkg.com/purecss#2.0.3/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
<link rel="stylesheet" href="src/css/custom.css">
<title>Hello, world!</title>
</head>
<body>
<div class="custom-wrapper pure-g" id="menu">
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu">
Brand
<s class="bar"></s><s class="bar"></s>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item">About</li>
<li class="pure-menu-item">Contact</li>
</ul>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item">Yahoo</li>
<li class="pure-menu-item">W3C</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="src/js/main.js"></script>
</body>
</html>
css
.custom-wrapper {
background-color: #ffd390;
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 2.1em;
overflow: hidden;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
.custom-wrapper.open {
height: 14em;
}
.custom-menu-3 {
text-align: right;
}
.custom-toggle {
width: 34px;
height: 34px;
position: absolute;
top: 0;
right: 0;
display: none;
}
.custom-toggle .bar {
background-color: #777;
display: block;
width: 20px;
height: 2px;
border-radius: 100px;
position: absolute;
top: 18px;
right: 7px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.custom-toggle .bar:first-child {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.custom-toggle.x .bar {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.custom-toggle.x .bar:first-child {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#media (max-width: 47.999em) {
.custom-menu-3 {
text-align: left;
}
.custom-toggle {
display: block;
}
}
/*# sourceMappingURL=custom.css.map */
JS
(function (window, document) {
var menu = document.getElementById('menu'),
rollback,
WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
function toggleHorizontal() {
menu.classList.remove('closing');
[].forEach.call(
document.getElementById('menu').querySelectorAll('.custom-can-transform'),
function(el){
el.classList.toggle('pure-menu-horizontal');
}
);
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
menu.classList.add('closing');
rollBack = setTimeout(toggleHorizontal, 500);
}
else {
if (menu.classList.contains('closing')) {
clearTimeout(rollBack);
} else {
toggleHorizontal();
}
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
};
function closeMenu() {
if (menu.classList.contains('open')) {
toggleMenu();
}
}
document.getElementById('toggle').addEventListener('click', function (e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
Codepen: https://codepen.io/Kifsif/pen/xxwMQpd
The problem is that menu items on large screens are not shown.
Remove overflow: hidden; property from custom-wrapper class and it will be shown. Although I am not sure if menu on large screen is positioned well but that is another problem.
.custom-wrapper {
background-color: #ffd390;
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 2.1em;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
I'm experimenting with Wordpress and (the recent version of) dompdf at the moment and ran into an annoying problem regarding the formating.
My Problem: The top-margin of the main content seems not to be considered on the second page generated, resulting in an overlapping with my logo. You can view the generated PDF under this link.
The relevant code from which the PDF is generated reads as follows (it is not perfect yet as i want to resolve the issue first):
function ppt_pdf_output() {
// post-ID of referring page needed
$post=get_post($_POST['postid']);
$output = '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>'.$post->post_title.'</title>
<style>
body {
margin: 30px 0 0 0;
font-family:sans-serif;
text-align:left;
}
img {
margin: 15px 0;
}
#header,
#footer {
position: fixed;
left: 0;
right: 0;
color: #aaa;
font-size: 0.9em;
line-height:1.2em;
}
#header {
top: -30px;
/*border-bottom: 0.1pt solid #aaa;*/
}
#footer {
bottom: 0;
border-top: 0.1pt solid #aaa;
}
#header table,
#footer table {
width: 100%;
border-collapse: collapse;
border: none;
text-align: center;
color: #000;
font-size: 24px;
}
.entry-content {
margin: 100px auto 35px auto;
top: 0; left: 0; bottom: 0; right: 0;
background-color: #d1d977;
width:90%; height:auto;
}
.entry-title {
font-size: 18px;
text-align: center;
}
#header td,
#footer td {
padding: 0;
width: 50%;
}
#footer .page-number {
text-align: center;
}
.page-number:before {
content: "Seite " counter(page);
}
.gallery-item {
display:inline-block;
}
br[style] {
display:none;
}
.gallery + p {
clear:left;
}
</style>
</head>
<body><div id="header">
<table>
<tr>
<td>ANTRAG</td>
<td style="text-align: right;"><img src="path/to/logo.png" /></td>
</tr>
</table>
</div>
<div id="footer">
<div class="page-number"></div>
</div>';
$output .='
<!--<h1 class="entry-title">'. $post->post_title .'</h1>-->
<div class="entry-content">' .
apply_filters('the_content',$post->post_content) . '</div>';
$output .= '</body></html>';
return $output;
}
As you can see, the formatting on the first page is as it should be (or at least as I intended it to be), but after the page break the content area (for visualization reasons provided with a green background) just starts at the beginning of the page, regardless of which number I give the margin.
Has anybody an idea how to resolve this issue? I've been working on this for countless hours and just don't know what to do at this point.
Any help would be greatly appreciated.
Kind regards
Olli
UPDATE: Of course I found this solution only just. I will try this and see if I can get the issue resolved with this.
UPDATE2: Still no luck. I'm now stuck with the following code (the output can be found under the link provided earlier):
function ppt_pdf_output() {
// post-ID of referring page needed
$post=get_post($_POST['postid']);
$output = '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>'.$post->post_title.'</title>
<style>
#page {
margin: 120px 50px 80px 50px;}
#header {
position: fixed;
top: -82px;
width: 100%;
height: 109px;
background: #aaa url("path/to/logo.png") no-repeat right;
}
#content {
width: 100%;
height: 85%;
background-color: #d1d977;
}
footer {
position: fixed;
bottom: -65px;
height: 30px;
background-color: #333399;
}
footer .page-number {
text-align: center;
}
.page-number:before {
content: "Seite " counter(page);
}
br[style] {
display:none;
}
</style>
</head>
<body><div id="header">
<h2>ANTRAG</h2>
</div>
<footer>
<div class="page-number"></div>
</footer>';
$output .='<h1>'. $post->post_title .'</h1>
<div id="content">' .
apply_filters('the_content',$post->post_content) . '</div>';
$output .= '</body></html>';
return $output;
}
It seems just so fragile. For example, as soon as I change the font-size of the h1 element, it gets overlapped by the logo. After the page break, it looks okay, but that just seems an coincidence - as soon as I change the font-size or the text, the text again gets overlapped. Will absolute positioning change anything or do you have any other tipps as how to resolve this anoying issue? Margins of any kind don't seem to work either.
You're on the right track. As you've seen, when an element is split across pages (as your content area is) some of the formatting information does not follow. This is by design.
The correct tact is to define the page margins so that they are large enough to hold your header/footer content and place the header/footer into that space. The content will then just fill the "body" of the document (i.e. the space inside the page margins). This is what you've attempted, but you haven't given enough space for the header. The header is positioned 82px inside the page margin but the height of the header is 109px. Because of this any content that has a small margin will still fall under the header.
Try this instead:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>"Kaffeefahrten" in Bornheim: hart durchgreifen, Senioren vor Betrügern schützen</title>
<style>
#page {
margin: 120px 50px 80px 50px;
}
#header {
position: fixed;
top: -115px;
width: 100%;
height: 109px;
background: #aaa url("path/to/logo.png") no-repeat right;
}
#content {
background-color: #d1d977;
}
footer {
position: fixed;
bottom: -65px;
height: 30px;
background-color: #333399;
}
footer .page-number {
text-align: center;
}
.page-number:before {
content: "Seite " counter(page);
}
br[style] {
display:none;
}
</style>
</head>
<body>
<div id="header">
<h2>ANTRAG</h2>
</div>
<footer>
<div class="page-number"></div>
</footer>
<h1>"Kaffeefahrten" in Bornheim: hart durchgreifen, Senioren vor Betrügern schützen</h1>
<div id="content">
...
</div>
</body>
</html>
Note that you also don't have to specify any height/width for the content element (unless you want to further constrict the space it uses).
With CSS3 you could go with your original styling and re-use the margins by applying the box-decoration-break property. However as of writing dompdf does not yet support this property.
I'm using a Nivo Slider in a website that uses Ajax to load its content. It saves the user from loading new pages every time they click on a link.
My problem is that when I load the home page initially, the slider works fine; but if I navigate away from that page then back to it, it just has the loading gif on a loop. Can anyone help?
My index.php is this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>I.C.T - St. Patrick's Academy, Lisburn</title>
<script type="text/javascript" src="assets/js/jqmin.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/style.css" media="all" />
<script type="text/javascript" src="assets/js/js.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/nivo.css" media="all" />
<script type="text/javascript" src="assets/js/sliderpack.js"></script>
<script type="text/javascript" src="assets/js/slide.js"></script>
</head>
<body>
<div id="wrap">
<div id="head">
<div id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Learn</li>
</ul>
</div>
<img src="assets/images/logo.png" alt="logo" />
</div>
<div id="screen">
<div id="pad"></div>
<div id="cont_wrap">
<div id="cont">
<h2>Home</h2>
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="assets/images/slide1.jpg" alt="1" />
<img src="assets/images/slide2.jpg" alt="2" />
<img src="assets/images/slide3.jpg" alt="3" />
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<p align="center"><i>Copyright 2013 - Finbar Maginn - St. Patrick's Academy, Lisburn</i></p>
</div>
</div>
</body>
</html>
(Note that my Nivo Slider initialization is inside slide.js and looks like this:)
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 16, // For slice animations
boxCols: 6, // For box animations
boxRows: 3, // For box animations
animSpeed: 1000, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: false, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: false, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
The Ajax jQuery file I'm using is this:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#links li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-3)){
var toLoad = hash+'.php #cont';
$('#cont').load(toLoad)
}
});
$('#links li a').click(function(){
var toLoad = $(this).attr('href')+' #cont';
$('#cont').fadeOut('fast',loadContent);
$('#load').remove();
$('#wrap').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('fast');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
function loadContent() {
$('#cont').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#cont').fadeIn('fast',hideLoader('fast'));
}
function hideLoader() {
$('#load').fadeOut('fast');
}
return false;
});
});
And here is my CSS:
body {
font-size:95%;
font-family:georgia;
line-height:1.576;
}
h2 {
padding:0;
margin:0;
}
#wrap {
margin:0 auto;
width:784px;
}
#head {
width:100%;
height:175px;
}
#links {
width:300px;
height:30px;
padding:140px 0 0 0;
float:right;
text-align:right;
}
#links ul {
margin:0;
padding:0;
}
#links ul li {
display:inline;
margin:0 -2px 0 -2px;
}
#links ul li a {
font-size:1em;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-ms-transition: 0.1s;
-o-transition: 0.1s;
text-decoration:none;
color:black;
background:-webkit-linear-gradient(bottom, white, #74b998);
background:-o-linear-gradient(bottom, white, #74b998);
background:-ms-linear-gradient(bottom, white, #74b998);
background:-moz-linear-gradient(bottom, white, #74b998);
padding:3px 5px 3px 5px;
}
#links ul li a:hover {
background:-webkit-linear-gradient(top, white, #74b998);
background:-o-linear-gradient(top, white, #74b998);
background:-ms-linear-gradient(top, white, #74b998);
background:-moz-linear-gradient(top, white, #74b998);
padding:7px 5px 7px 5px;
}
.left {
border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-bottom-left-radius:10px;
-ms-border-bottom-left-radius:10px;
-o-border-bottom-left-radius:10px;
border-top-left-radius:10px;
-webkit-border-top-left-radius:10px;
-moz-border-top-left-radius:10px;
-ms-border-top-left-radius:10px;
-o-border-top-left-radius:10px;
}
.right {
border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-bottom-right-radius:10px;
-ms-border-bottom-right-radius:10px;
-o-border-bottom-right-radius:10px;
border-top-right-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-top-right-radius:10px;
-ms-border-top-right-radius:10px;
-o-border-top-right-radius:10px;
}
.radius {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
}
#screen {
width:100%;
height:480px;
background-image:url(../images/bckgrnd.png);
}
#pad {
width:100%;
height:29px;
}
#cont_wrap {
overflow:auto;
margin:0 auto;
width:724px;
height:335px;
padding: 0 0 0 6px;
}
#load {
display: none;
position: absolute;
top: 150px;
left: 950px;
text-indent: -9999em;
width: 16px;
height: 16px;
background: url(../images/load.gif) no-repeat;
}
#cont {
}
#foot {
width: 100%;
font-size:90%;
color:gray;
}
#slider {
margin: 0 auto;
width: 700px;
height: 273px;
}
.nivoSlider {
position: relative;
background: url(../images/load.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.nivoSlider a {
border: 0;
display: block;
}
http://dev.viral-minds.com/miller/abc/abc.html
two questions about this
How do I keep the green block from "blinking" at the beginning when the page loads?
The animation only works on chrome at the moment...how to get it to work in FF and IE?
thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>main</title>
<style type="text/css">
body
{
background-color:#FFFFF0; /*ivory*/
overflow: hidden;
}
#box
{
position: absolute;
width:495px;
height:263px;
background:#32331d;
top: 20px;
left: 20px;
}
#nav
{
position: absolute;
margin-left:30px;
width:100%;
height:100px;
top: 425px;
z-index: 100;
background-image:url('colors.png');
background-repeat:no-repeat;
}
#stars,
#stars-2,
#small-stars,
#small-stars-2 {
position: absolute;
top: 50%;
left: 50%;
width: 800px;
height: 800px;
margin: -300px 0 0 -300px;
background: url(stars-large.png) no-repeat center center;
-webkit-animation-name: starsLarge;
-webkit-animation-duration: 240s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes starsLarge {
from {
-webkit-transform: rotate(0deg) scale(3);
opacity: .9;
}
to {
-webkit-transform: rotate(360deg) scale(.5);
opacity: .5;
}
}
#stars-2 {
-webkit-animation-name: starsLargeAlt;
-webkit-animation-duration: 180s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes starsLargeAlt {
from {
-webkit-transform: rotate(180deg) scale(3);
opacity: .9;
}
to {
-webkit-transform: rotate(360deg) scale(.5);
opacity: .5;
}
}
#small-stars,
#small-stars-2 {
background: url(stars-small.png) no-repeat center center;
-webkit-animation-duration: 60s;
-webkit-animation-name: starsSmall;
}
#small-stars-2 {
-webkit-animation-name: starsSmallAlt;
-webkit-animation-duration: 120s;
}
#-webkit-keyframes starsSmall {
from {
-webkit-transform: rotate(360deg) scale(3);
opacity: .9;
}
to {
-webkit-transform: rotate(0deg) scale(.5);
opacity: .5;
}
}
#-webkit-keyframes starsSmallAlt {
from {
-webkit-transform: rotate(0deg) scale(3);
opacity: .9;
}
to {
-webkit-transform: rotate(360deg) scale(.5);
opacity: .5;
}
}
</style>
</head>
<body>
<div id="box"><img src="actual.png"></img></div>
<div id="nav"></div>
<div id="stars"></div>
<div id="stars-2"></div>
<div id="small-stars"></div>
<div id="small-stars-2"></div>
</body>
Item 1: The green block flickers because the overlayed image is not retrieved from the server yet. You could add display: none; to the CSS for #box, then programmatically display it after the page has been fully loaded. For example:
// jQuery:
$(document).ready(function(){
$('#box').show();
});
Item 2: The animation only works in Chrome because you are using -webkit specific style definitions. You will need to research alternatives, such as -moz and -ms in order to see if it can work in those browsers. You could also try omitting the prefix altogether.
I. You can change the background color of that div to match the page background. And later, when the image has been loaded, you change it to dark green via jQuery:
$(function() {
$('#box img').load(function() {
$(this).parent().css('background-color', '#32331D');
});
});
II. You have to add browser specific prefixes other than -webkit.
For FF - -moz
For IE - -ms
For Opera - -o
Just keep in mind that those animations won't work in older versions of IE (8 and under) despite the prefixes. Those suckers don't support CSS animations.