html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html lang="en">
<head>
<title>Rose with CSS and JavaScript</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<p class="text-center">Click on a peddle to use your favourite colours and download a snapshot.</p>
<div class="rose">
<div class="stem"></div>
<div class="peddles"></div>
<div class="rose-centre"></div>
<div class="leaf-1"></div>
<div class="leaf-2"></div>
</div>
<div class="dialog">
<p>Edit the rose peddle density and its colours to make this rose really special.</p>
<input id="numRosePeddlesPerCircle" type="range" min="3" max="21" value="12">
<div class="peddle-colours">
<input id="peddleColour" type="color" value="#ff3232">
<input id="peddleHighlightColour" type="color" value="#ff8080">
</div>
<div class="footer text-center">
<button class="btn btn-primary ok">OK</button>
<button class="btn btn-primary download">Download Snapshot</button>
</div>
</div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
body {
background-color: #000 !important;
height: 100vh;
}
/*
Animate the "Click the peddle" message initially to get the user's attention.
Hide the message a few seconds later so it stops obstructing the view of the flower.
*/
body > p {
position: fixed;
top: 0;
width: 100%;
color: transparent;
animation: fadeout 10s;
}
@keyframes fadeout {
from { color: #fff; }
25% {
color: rgb(255,50,50);
font-size: 1.1em;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*
This code is a crafty example for using JavaScript-controlled CSS variables and other CSS3 features like animations, gradients, and transformations.
CSS variables for the rose peddle colours are controlled through the user-interface with help from JavaScript.
Please remember to up vote if you like this code. Also, have fun sharing digital roses with your friends using the "Download Snapshot" feature of the dialog.
Author: Josh Greig
You can chat with me on facebook at
https://www.facebook.com/josh.greig.5 or email me at josh.greig@gmail.com if you have questions about this.
I'm more than happy to help.
*/
$(function() {
var maxRadius;
var numPeddlesPerCircle = 2;
function resized() {
maxRadius = ($('body').width() + $('body').height()) * 0.1;
updateRosePainting();
}
/* Depending on the number of peddles per circle, the peddles would ordinarily appear too large at 3
and too small at 23.
This function returns a value between 0 and 1 to multiply the maxRadius by to get the very largest peddle's size.
*/
function getInitialRadiusMultiplier() {
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run