- Smooth Page Transitions:
htmlCopy code<!DOCTYPE html>
<html>
<head>
<style>
body {
opacity: 0;
transition: opacity 0.5s;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
document.body.style.opacity = 1;
});
</script>
</head>
<body>
<!-- Your page content -->
</body>
</html>
This code snippet adds a smooth fade-in effect to your web page by initially setting the body’s opacity to 0 and then transitioning it to 1 using CSS and JavaScript.
- Disable Form Submission on Enter Key:
htmlCopy code<form onkeydown="return event.key != 'Enter';">
<!-- Your form elements -->
<button type="submit">Submit</button>
</form>
By adding the onkeydown attribute to your form, you can prevent form submission when the Enter key is pressed. This can be useful in scenarios where you want to control the form submission behavior.
- Prevent Image Dragging:
htmlCopy code<img src="your-image.jpg" draggable="false">
To disable dragging of an image, you can use the draggable attribute and set it to “false”. This prevents users from dragging the image to another location or opening it in a new tab.
- Responsive Videos:
htmlCopy code<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe src="https://www.youtube.com/embed/your-video-id" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>
This code creates a responsive video container that maintains its aspect ratio. Adjust the padding-bottom value to match the aspect ratio of your video (e.g., 56.25% for a 16:9 aspect ratio).
- Custom Fonts with @font-face:
htmlCopy code<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: 'YourFontName';
src: url('your-font.woff2') format('woff2'),
url('your-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'YourFontName', sans-serif;
}
</style>
</head>
<body>
<!-- Your page content -->
</body>
</html>
Using @font-face, you can define and use custom fonts in your web page. Make sure to include the font files (in different formats) and specify the correct paths in the src property.
These additional HTML code tricks should expand your toolkit and help you create more dynamic and customized web pages. Enjoy exploring the possibilities!
Leave a Reply