Applications.ge

CSS Animations

Example 1: Bouncing Ball Animation:

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-100px); }
    }
    .ball {
    	border-radius: 30px;
      width: 50px;
      height: 50px;
      background-color: red;
      position: relative;
      animation: bounce 2s ease-in-out infinite;
    }
  </style>
</head>
<body>
  <div class="ball"></div>
</body>
</html>

The ball moves up and down in a continuous loop. The position: relative is used to keep the ball within its container. Example 2: Sequential Animation:

<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes slide-in {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(0); }
    }
    @keyframes fade-in {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    .card {
      width: 300px;
      height: 200px;
      background-color: #007bff;
      color: white;
      animation: slide-in 1s ease-in-out forwards, fade-in 1s ease-in-out forwards 1s;
    }
  </style>
</head>
<body>
  <div class="card">Sequential Animation</div>
</body>
</html>

This example combines two animations (slide-in and fade-in) to create a sequential animation effect on a card. The forwards keyword ensures that the final state of the animations is maintained after they finish. Example 3: Animated Typing Effect:

<!DOCTYPE html>
<html>
<head>
  <style>
    .typing {
      font-family: monospace;
      overflow: hidden;
      white-space: nowrap;
      border-right: 3px solid;
      animation: typing 3s steps(40) infinite, blink 0.75s step-end infinite;
    }
    @keyframes typing {
      from { width: 0; }
      to { width: 100%; }
    }
    @keyframes blink {
      50% { border-color: transparent; }
    }
  </style>
</head>
<body>
  <div class="typing">Hello, I'm a typing effect.</div>
</body>
</html>

The typing animation gradually reveals the text by increasing the width of the border, and the blink animation simulates the blinking cursor. Example 4: Animated Gradient Background:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      height: 100vh;
      background: linear-gradient(-45deg, #007bff, #00ff00, #ff0000, #ffc107);
      background-size: 400% 400%;
      animation: gradient 10s ease infinite;
    }
    @keyframes gradient {
      0%, 100% { background-position: 0 50%; }
      25% { background-position: 100% 50%; }
      50% { background-position: 50% 100%; }
      75% { background-position: 0 50%; }
    }
  </style>
</head>
<body>
</body>
</html>

This example animates a gradient background by changing the background-position at different keyframes. The result is a visually striking and dynamic background. Example 5: Image Gallery with Hover Effect:

<!DOCTYPE html>
<html>
<head>
  <style>
    .image-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .image {
      width: 200px;
      height: 150px;
      overflow: hidden;
      position: relative;
      transition: transform 0.3s ease-in-out;
    }
    .image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .image:hover {
      transform: scale(1.1);
    }
    .caption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 5px;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
    .image:hover .caption {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <div class="image">
      <img src="https://shorturl.at/fjsOQ" alt="Image 1">
      <div class="caption">Beautiful Landscape</div>
    </div>
    <div class="image">
      <img src="https://shorturl.at/muvW9" alt="Image 2">
      <div class="caption">City Skyline</div>
    </div>
    <div class="image">
      <img src="https://shorturl.at/bkwBE" alt="Image 3">
      <div class="caption">Sunny Beach</div>
    </div>
  </div>
</body>
</html>

This example creates an image gallery with a hover effect. When you hover over an image, it scales up and reveals a caption. The transition property is used to smoothly animate the scaling and opacity changes.

by Luka Tatarishvili

CSS

css

ფაილის დამატება

ფაილის შესაქმნელად ვიყენებთ ამ ბრძანებას:Touch touch .gitignore შეიქმნება ფაილი gitignore, რომელშიც შეგვიძლია მივუთითოთ რა ტიპის ფაილები უნდა დააიგნოროს გიტმა. მაგალითად, ჩავწერთ gitignore ფაილში *.html -ს და ყველა ფაილი რომელიც დაბოლოვდება html-ით გიტი არ გამოაჩენს.

by ვაჟა ტყემალაძე

Git

git

pointer-events: none

The element does not react to pointer events. It's a way to disable inputs inside the div

style="pointer-events: none;"

by Luka Tatarishvili

CSS

css property

add column to datatable

{
    $query = Comment::with('user')
        ->where('model', $model)
        ->where('model_id', $model_id)
        ->orderBy('id', 'desc');

    return DataTables::of($query->get())
        ->addColumn('user_roles', function ($comment) {
            return $comment->user->getRoleNames()->implode(', ');
        })
        ->toJson();
}

we can add new column to datatable json data using this

by Giorgi Ivanidze

Laravel

PHP

datatable

Commonly used attributes

HTML attributes are additional properties that can be added to HTML elements to provide extra information or modify the behavior of the elements. id:

<div id="myElement">This is a div with an ID</div>

class:

<p class="highlighted">This paragraph has a class</p>

style:

<span style="color: red; font-size: 16px;">Red and larger text</span>

src:

<img src="image.jpg" alt="An image">

href:

<a href="https://www.example.com">Visit Example</a>

href:

<img src="image.jpg" alt="A beautiful landscape">

alt:

<img src="image.jpg" alt="A beautiful landscape">

disabled:

<button type="button" disabled>Disabled Button</button>

required:

<input type="text" required>

by Luka Tatarishvili

HTML

Attributes

Custom Data Attributes

Custom Data Attributes

allow us to

attach

custom

data

to

HTML elements

without affecting the element's functionality or appearance. Syntax: To create a custom data attribute, you need to use the data- prefix followed by your chosen attribute name. Example:

<div data-info="example-data" data-count="42">Custom Data Attributes</div>

In this example, we have added two custom data attributes, data-info and data-count, to a <div> element. Accessing Data Attributes with JavaScript:

<div id="myDiv" data-info="example-data" data-count="42">Custom Data Attributes</div>

<script>
  const myDiv = document.getElementById("myDiv");
  
  // Accessing individual data attributes
  const infoData = myDiv.dataset.info;
  const countData = myDiv.dataset.count;
  
  console.log(infoData); // Output: "example-data"
  console.log(countData); // Output: "42"
</script>

Modify:

<div id="myDiv" data-info="example-data" data-count="42">Custom Data Attributes</div>

<script>
  const myDiv = document.getElementById("myDiv");
  
  // Modifying data attributes
  myDiv.dataset.info = "new-data";
  myDiv.dataset.count = 100;
</script>

Using Custom Data Attributes with Events:

<button data-action="delete" data-id="123">Delete Item</button>

<script>
  const deleteButton = document.querySelector("[data-action='delete']");
  
  deleteButton.addEventListener("click", function(event) {
    const itemId = event.target.dataset.id;
    console.log("Deleting item with ID:", itemId);
    // Perform the delete operation using the itemId
  });
</script>

by Luka Tatarishvili

HTML

Attributes

HTML <PRE> TAG

The

<pre>

tag defines preformatted text. Text in a

<pre>

element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

by Tinatin Kvinikadze

HTML

<PRE>

სინტაქქსები

დეკლარაცია განსაზღვრავს, რომ ეს

<!DOCTYPE html>

დოკუმენტი არის HTML5 დოკუმენტი

<html>

ელემენტი არის HTML გვერდის ძირითადი ელემენტი

<head>

ელემენტი შეიცავს მეტა ინფორმაციას HTML გვერდის შესახებ ელემენტი განსაზღვრავს სათაურს HTML გვერდისთვის ( <title>რომელიც ნაჩვენებია ბრაუზერის სათაურის ზოლში ან გვერდის ჩანართში) ელემენტი განსაზღვრავს დოკუმენტის <body>სხეულს და წარმოადგენს კონტეინერს ყველა ხილული შინაარსისთვის, როგორიცაა სათაურები, აბზაცები, სურათები, ჰიპერბმულები, ცხრილები, სიები და ა.შ.

<h1>

ელემენტი განსაზღვრავს დიდ სათაურს

<p>

ელემენტი განსაზღვრავს აბზაცს

by ვაჟა ტყემალაძე

HTML

html

Meta tags

control how a webpage is displayed on different devices by adjusting the width and initial zoom level of the viewport to match the device's screen size

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width

- sets the width of the viewport to be equal to the width of the device's screen. This ensures that the webpage adapts and fills the entire width of the device, regardless of its specific screen size or resolution. CSS media query works properly with any device by setting device width to viewport

initial-scale=1

- sets the initial zoom level when the webpage is first loaded. A value of 1 means that the webpage will be displayed at a 1:1 ratio, without any zooming or scaling applied

by ვაჟა ტყემალაძე

HTML

html

meta tags

Semantic tags sum up

Summary of semantical meaning tags: Tags with Semantic Meaning:

<strong>

<em>

Tags without Semantic Meaning:

<b>

<I>

<mark>

<small>

<del>

<ins>

<sub>

<sup>

<s>

<u>

<be>

<pre>

by ვაჟა ტყემალაძე

HTML

html