Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Firstly, we have considered the following two dates.SimpleDateFormat s = new SimpleDateFormat("yyyy-MM-dd"); Date d1 = s.parse("2018-10-15"); Date d2 = s.parse("2018-11-10");Now, use the compareTo() method to compare both the dates. The results are displayed on the basis of the return value.if (d1.compareTo(d2) > 0) { System.out.println("Date1 is after Date2!"); } else if (d1.compareTo(d2) < 0) { System.out.println("Date1 is before Date2!"); } else if (d1.compareTo(d2) == 0) { System.out.println("Date1 is equal to Date2!"); } else { System.out.println("How to get here?"); }Example Live Demoimport java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; public class ... Read More
Use the justify-content property with value flex-start to align the flex-items at the beginning.You can try to run the following code to implement the flex-start valueExampleLive Demo .mycontainer { display: flex; background-color: red; justify-content: flex-start; } .mycontainer > div { background-color: orange; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Result Rank1 Rank2 Rank3 Rank4
To implement animation on the border-spacing property with CSS, you can try to run the following codeExampleLive Demo table,th,td { border: 1px solid green; } #newTable { width: 500px; height: 300px; background: yellow; border: 15px solid yellow; animation: myanim 3s infinite; background-position: bottom left; background-size: 50px; } @keyframes myanim { 30% { background-color: orange; border-right-color: red; border-right-width: 25px; border-spacing: 50px } } Performing Animation for border spacing Subject Student Marks Maths Amit 98 Science Sachin 99
To implement animation on border-right-width property with CSS, you can try to run the following codeExampleLive Demo div { width: 500px; height: 300px; background: yellow; border: 15px solid yellow; background-image: url('https://www.tutorialspoint.com/latest/cuda.png'); animation: myanim 3s infinite; background-position: bottom left; background-size: 50px; } @keyframes myanim { 30% { background-color: maroon; border-right-color: red; border-right-width: 25px; } } Performing Animation for border right width
Shadow filter is used to create an attenuated shadow in the direction and color specified.The following parameters can be used in this filterParameterDescriptionColorThe color that you want the shadow to be.DirectionThe direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left).0 = Top45 = Top right90 = Right135 = Bottom right180 = Bottom225 = Bottom left270 = Left315 = Top leftExampleYou can try to run the following code to implement shadow filter −Live Demo Text Example: CSS Tutorials
Use the align-items property with value flex-start to align flex items on the top.You can try to run the following code to implement the flex-start valueExampleLive Demo .mycontainer { display: flex; height: 300px; background-color: red; align-items: flex-start; } .mycontainer > div { background-color: white; text-align: center; line-height: 60px; font-size: 30px; width: 100px; margin: 5px; } Quiz Q1 Q2 Q3 Q4 Q5
To implement Fade Out Down Animation Effect on an image with CSS, you can try to run the following code −ExampleLive Demo .animated { background-image: url(/css/images/logo.png); background-repeat: no-repeat; background-position: left top; padding-top:95px; margin-bottom:60px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } Reload page function myFunction() { location.reload(); }
The nav-up property is used to move up when you have pressed on up arrow button in the keypad. You can try to run the following code to implement the CSS nav-up propertyExampleLive Demo button { position: absolute; } button#btn1 { top: 10%; left: 15%; nav-index: 1; nav-right: #btn2; nav-left: #btn4; nav-down: #btn2; nav-up: #btn4; } button#btn2 { top: 30%; left: 30%; nav-index: 2; nav-right: #btn3; nav-left: #btn1; nav-down: #btn3; nav-up: #btn1; } button#btn3 { top: 50%; left: 15%; nav-index: 3; nav-right: #btn4; nav-left: #btn2; nav-down: #btn4; nav-up: #btn2; } button#btn4 { top: 30%; left: 0%; nav-index: 4; nav-right: #btn1; nav-left: #btn3; nav-down: #btn1; nav-up: #btn3; } Result1 Result2 Result3 Result4
The Alpha Channel filter alters the opacity of the object, which makes it blend into the background. The following parameters can be used in this filter −ParameterDescriptionOpacityLevel of the opacity. 0 is fully transparent, 100 is fully opaque.finishopacityLevel of the opacity at the other end of the object.StyleThe shape of the opacity gradient.0 = uniform1 = linear2 = radial3 = rectangularstartXX coordinate for opacity gradient to begin.startYY coordinate for opacity gradient to begin.FinishX coordinate for opacity gradient to end.FinishY coordinate for opacity gradient to end.ExampleYou can try to run the following code to implement Alpha Filter −Live Demo ... Read More
Get the values of properties in CSS using the calc() property. You can try to run the following code to implement the calc() function in CSSExampleLive Demo #demo { position: absolute; width: calc(100% - 100px); background-color: blue; text-align: center; } Heading One This is it!