Pick a texture
How do I make an pick a texture?
What is a pick a texture? How do you make a pick a texture? This script and codes were developed by Emily K on 09 September 2022, Friday.
Pick a texture - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pick a texture</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html>
<head> <title>Codagogy Card-o-Matic</title> <link rel="stylesheet" href="css/main.css" type="text/css"> <link rel="stylesheet" href="css/features.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id='wrapper'> <h1>Codagogy Card-o-Matic</h1> <!-- Left side with all the controls --> <div id='controls'> <!-- Color picker --> <h2>Pick a color</h2> <div class='colors' id='red'></div> <div class='colors' id='orange'></div> <div class='colors' id='yellow'></div> <div class='colors' id='green'></div> <div class='colors' id='blue'></div> <div class='colors' id='indigo'></div> <div class='colors' id='violet'></div> <div class='clearfix'></div> <!-- Texture picture --> <h2>Pick a texture</h2> <div class='texture' id='paper'></div> <div class='texture' id='swirls'></div> <div class='texture' id='circles'></div> <div class='texture' id='cloth'></div> <div class='clearfix' id=''></div> <!-- Message --> <h2>Pick a message</h2> <!-- Recipient --> <h2>Dear...</h2> <!-- Sticker picker --> <h2>Click a sticker to add</h2> </div> <!-- Right side with the live preview --> <div id='preview'> <div id='card-background'> <div id='canvas'> <div id='message-output'></div> <div id='recipient-output'></div> </div> </div> <!-- Buttons --> <input type='button' id='refresh-btn' value='Start over'> <input type='button' id='print-btn' value='Print'> </div>
</div>
<script src="js/card-o-matic.js"></script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>
Pick a texture - Script Codes CSS Codes
.colors { width:30px; height:30px; cursor:pointer; float:left; margin-right:5px;
}
#red{ background-color:red;
}
#orange{ background-color:orange;
}
#yellow{ background-color:yellow;
}
#green{ background-color:green;
}
#blue{ background-color:blue;
}
#indigo{ background-color:indigo;
}
#violet{ background-color:violet;
}
.texture { width:30px; height:30px; cursor:pointer; float:left; margin-right:5px;
}
#paper{ background-image: url('../images/texture-paper.png');
}
#swirls{ background-image: url('../images/texture-swirls.png');
}
#circles{ background-image: url('../images/texture-circles.png');
}
#cloth{ background-image: url('../images/texture-cloth.png');
}
Pick a texture - Script Codes JS Codes
$('.colors').click(function(){ var chosen_color = $(this).css('background-color'); $('#canvas').css('background-color', chosen_color);
});
$('.texture').click(function(){
var chosen_texture = $(this).css('background-image');
$('#canvas').css('background-image', chosen_texture);
});
Developer | Emily K |
Username | Emnk |
Uploaded | September 09, 2022 |
Rating | 3 |
Size | 2,284 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Map for event - simple | 5,111 Kb |
BOMP Test | 5,138 Kb |
Practice using Wixel | 3,057 Kb |
A taste of jQuery UI with dragging | 3,408 Kb |
Fluid layout practice | 3,293 Kb |
PHPiggy Bank | 1,693 Kb |
Boston Middle Passage Profile Gallery Beta | 3,388 Kb |
Pick a texture | 2,284 Kb |
BOMP Test for WCC feedback | 166,822 Kb |
Bonus Features | 5,994 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
NT Tribute | Skybutterfly | 2,850 Kb |
After America | Jonathangarner | 2,686 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Testing Portfolio Page | Sideshowli | 3,395 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Out of the blue | Giaco | 2,537 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
CSS Flip Animation | Bbodine1 | 2,525 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!