Search

CSS's Tags

Disable Text Selection In WebPage Using jQuery and CSS
Many times you need to prevent text selection on your web pages because of no one direct copy your web page content. In this article, we will share with you how to disable text selection on HTML web pages using jQuery and CSS. Why did text selection make disable? Many people have question why we need HTML web pages text selection to make disable for web users? it has a simple answer is for a security purpose. in some web pages, some text content needs to protect for a copy past functionality then this functionality is very helpful for us. You can make any particular tag's text selection make disable. we will show it in the example. and you can do it simple CSS property user-select and also as well help of some jQuery coding. this is a very small functionality but very helpful. Disable text selection using CSS We can be done it also help of user-select CSS property. here you show how to use it and make text selection disable in your HTML web pages. <!DOCTYPE html> <html> <head> <title>Disable text selection using CSS - HackTheStuff</title> <style type="text/css"> body { user-select: none; /* supported by Chrome and Opera */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ } </style> </head> <body> <h3>Disable text selection using CSS</h3> <p>The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.</p> </body> </html> Disable text selection using jQuery In this example, we will share with you how to make text selection disable using jQuery. in this example, we will create our own disableSelection() function for disabling text selection in our HTML web pages. <!DOCTYPE html> <html> <head> <title>Disable text selection using jQuery - HackTheStuff</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> </head> <body> <h3>Disable text selection using jQuery</h3> <p class="disabletest">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <script type="text/javascript"> (function($){ $.fn.disableTextSelection = function() { return this .attr('unselectable', 'on') .css('user-select', 'none') .on('selectstart', false); }; })(jQuery); $('.disabletest').disableTextSelection(); </script> </body> </html> Look above example. I am here do make disable text selection on CSS class help of jQuery. here only the first p tag's text was not selected by on web page. but you can be done is on your own requirement. Disable text selection using a jQuery UI library You can also be done with the jQuery UI library. it provides much helpful functionality By default and HTML web page's test selection make disable is also provides it. you should import the jQuery UI library in your HTML code. <!DOCTYPE html> <html> <head> <title>Disable text selection using jQuery UI library - HackTheStuff</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <h3>Disable text selection using jQuery UI library</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <script type="text/javascript"> $('body').disableSelection(); </script> </body> </html> Conclusion As you can see, text selection makes disable in HTML web pages using CSS and jQuery is very easy to use in any web application. We hope that small tutorials help everyone.
Neumorphism/Soft UI CSS shadow generator
There are lots of softwares available from which you can get code from design. There is Neumorphism/Soft UI online and open source application that can generate CSS code for the Soft box. This is helpful for the designer. You can design make any element like that. This is great tool when you want to make readymade UI.. You can direct make changes from UI and get CSS code for the boxes. Or you can download the application from th GitHub. Download the code from the link and run the below command to start application. npm start And in your browser, open http://localhost:3000. You can get the view to configure and get code.
How to Create Animation Effects using pure CSS
Creating animation nowadays is becoming a lot easier than ever. There are many readymade library available to create animation effect. In this article, we will discuss about one of these library. Animate.css is simple one css file library which provides cross-browser animations for any web application. The animate.css useful in home pages, sliders for attention-guiding hints. Animate.css. Installation Install animate.css using npm command. npm install animate.css --save Or simply add the CDN file directly in <head> tag of HTML code. <head>     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head> Usage After you add the library, just add animate__animated class along with along with any animation name with prefix animate__ to elements which you want to add animation. Example: <h1 class="heading animate__animated animate__bounce">An animated element</h1> You can change animation duration by adding animate__delay-3s class where 3s is 3 seconds time of animation. You can also add the effect to specific class using @keyframes directly to any class. You don't need to add animate__ prefix while adding it to animation. You also need to add animation-duration with it. .heading {     animation: bounce;     animation-duration: 2s; } You can use Javascript code to add sugar with Animate.css library. This will create effect whenever you want any event occurs. const elem = document.querySelector('.header'); elem.classList.add('animate__animated', 'animate__bounce'); Full Example: <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>Animate.css</title>     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head> <body>     <div class="text-center mt-5">         <h1 class="header animate__animated">I am dancing!</h1>         <button class="btn btn-primary">Animate</button>     </div>     <script type="text/javascript">         document.querySelector('.btn-primary').addEventListener('click', function() {             const elem = document.querySelector('.header');             elem.classList.add('animate__bounce');             setTimeout(function() {                 const elem = document.querySelector('.header');                 elem.classList.remove('animate__bounce');             }, 1000);         });     </script> </body> </html> This way you can add animation to make your web application more attractive. You can get all animation effect name at here. I hope you liked this article.
Bootstrap clearfix class with example
In this article, I will show you how you can clear floated space and start new elements from new line. If you use float property to element, it always float to left or right as you have set. The new elements you may want to start from new line but it may also start in beside floated elements. Here is below example. Example: <!doctype html> <html> <head>     <title>Without clearfix</title>     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body>     <div class="container">         <div class="border border-3">             <img src="https://hackthestuff.com/uploads/subCategories/1626256775898nginx.png" class="float-start">             <h1>Without clearfix</h1>         </div>         <p class="lead">This is new line and should start from new line.</p>     </div> </body> </html> You can see <p> element is started after <h1> element which is not as you want. To prevent <p> element start direct after <h1> element, you need to clear the float. Bootstrap .clearfix class clear floated content within a parent element. You just need to add .clearfix class to the parent element and it will fix the issue. Here is the example: <!doctype html> <html> <head>     <title>With clearfix</title>     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body>     <div class="container">         <div class="border border-3 clearfix">             <img src="https://hackthestuff.com/uploads/subCategories/1626256775898nginx.png" class="float-start">             <h1>With clearfix</h1>         </div>         <p class="lead">This is new line and should start from new line.</p>     </div> </body> </html> You can see p element started after clearfix class. I hope it will help you.
Manipulating CSS using jQuery css method
Sometimes you need to add or change CSS after Javascript events fire, For example clicks, hover. Using jQuery, you can simply change CSS to any elements. Or you might want to get CSS for the selected element based on condition. In this article, I will show you how you can add new CSS, change or get CSS of any element using jQuery. jQuery has css() method which is used to manipulate CSS. Syntax: $(selector).(propertyname, propertyvalue); Example: In the below example, first p element has style background-color:green and second p element doesn't have any background-color property. If the property doesn't have any property name, it will set property value else it will change CSS for the selected all elements. <!DOCTYPE html> <html> <head> </head> <body>     <h1>jQuery css() method</h1>     <p style="background-color: green;">This element have background-color property as green</p>     <p>This element doesn't have any background-color property</p>     <button id="btn">Change background-color property</button>     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>     <script type="text/javascript">         $(document).ready(function(){             $('button').on('click', function() {                 $('p').css('background-color', 'red');             });         });     </script> </body> </html> If you want to find any property value for the selected element, remove second parameter. If there are more than one matched selector, it will return property value from first matched selector. If the selected element doesn't has any property, then it will return default value. Syntax: $(selector).(propertyname); Below example will return the property value for the first p element. <!DOCTYPE html> <html> <head> </head> <body>     <h1>jQuery css() method</h1>     <p>This element doesn't have any background-color property</p>     <p style="background-color: green;">This element have background-color property as green</p>     <button id="btn">Get background-color property</button>     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>     <script type="text/javascript">         $(document).ready(function() {             $('button').on('click', function() {                 var bgColor = $('p').css('background-color');                 alert('p element has background-color property as '+bgColor);             });         });     </script> </body> </html> I hope it will help you.