• Web sitemizin içeriğine ve tüm hizmetlerimize erişim sağlamak için Web sitemize kayıt olmalı ya da giriş yapmalısınız. Web sitemize üye olmak tamamen ücretsizdir.
  • Sohbetokey.com ile canlı okey oynamaya ne dersin? Hem sohbet et, hem mobil okey oyna!
  • Soru mu? Sorun mu? ''Bir Sorum Var?'' sistemimiz aktiftir. Paylaşın beraber çözüm üretelim.

HTML Ve CSS Kullanarak Özel Araç İpucunu Oluşturma!

Tranquillo

Grafiker™️ Developer✓ Development Yetkilisi·
Üyelik Tarihi
4 Ocak 2023
Konular
53
Mesajlar
132
MFC Puanı
1,620
d2PXgtzW4oPi90vhnQ7C.png

HTML Ve CSS Kullanarak Özel Araç İpucunu Oluşturma!

HTML ve CSS kullanarak kendi araç ipuçlarımızı nasıl oluşturacağımızı öğreneceğiz. Bu proje tamamen yeni başlayanlar için uygundur ve araç ipucunuzu web sitenize dahil etmenize yardımcı olacaktır.

HTML:
<section class="footer">
    <!-- Footer -->
    <footer class="mt-auto bg-primary text-white">
        <!-- Grid container -->
        <div class="container-lg p-4">
            <!--Grid row-->
            <div class="row">
                <!--Grid column-->
                <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
                    <h5 class="text-uppercase">About Title</h5>

                    <p>
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
                        molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae
                        aliquam voluptatem veniam, est atque cumque eum delectus sint!
                    </p>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                    <h5 class="text-uppercase">Links</h5>

                    <ul class="list-unstyled mb-0">
                        <li>
                            <a href="#!" class="text-white">Line 1</a>
                        </li>
                        <li>
                            <a href="#!" class="text-white">Link 2</a>
                        </li>
                        <li>
                            <a href="#!" class="text-white">Link 3</a>
                        </li>
                        <li>
                            <a href="#!" class="text-white">Link 4</a>
                        </li>
                    </ul>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                    <h5 class="text-uppercase">Contact Us</h5>
                    <p><i class="fa fa-envelope-o mr-3"></i> info@hsdf.com</p>
                </div>
                <!--Grid column-->
            </div>
            <!--Grid row-->
        </div>
        <!-- Grid container -->

        <!-- Copyright -->
        <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
            © 2021 Copyright:
            <a class="text-white" href="https://mdbootstrap.com/">Project.com</a>
        </div>
        <!-- Copyright -->
    </footer>
    <!-- Footer -->
</section>

Çok temel HTML kodu kullandık. Kodu hemen anlayacaksınız. İlk olarak, web sayfamızın ana başlığını oluşturmak için heading etiketlerini kullandık. Daha sonra çeşitli araç ipuçlarımız için bir kapsayıcı oluşturmak üzere bir div etiketi kullandık. Bu makalede, her biri sol, sağ, üst ve alt gibi farklı bir konuma sahip dört farklı araç ipucu oluşturduk. Basamaklı Stil Sayfaları CSS, HTML veya XML ile yazılmış bir belgenin sunumunu tanımlamak için kullanılan bir işaretleme dilidir. CSS, HTML ve JavaScript gibi World Wide Web'in önemli bir bileşenidir.

CSS:
/* Start Fonts from Google Fonts */
/*Google Fonts*/

@import url("https://fonts.googleapis.com/css?family=Arapey|Cantarell|Comfortaa|Khand|Russo+One|Ubuntu");

/*End Fonts*/

/* Start Body */

body {

  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: aliceblue;
  color: #444;
  font-family: "Comfortaa", cursive;
  text-align: center;
  font: 16px;
}

/* End Body */

h1 {
  margin-bottom: 7%;
}

/*tooltip Box*/
.con-tooltip {
  position: relative;
  background: #f2d1c9;

  border-radius: 9px;
  padding: 0 20px;
  margin: 10px;

  display: inline-block;

  transition: all 0.3s ease-in-out;
  cursor: default;
}

/*tooltip */
.tooltip {
  visibility: hidden;
  z-index: 1;
  opacity: 0.4;

  width: 100%;
  padding: 0px 20px;

  background: #333;
  color: #e086d3;

  position: absolute;
  top: -140%;
  left: -25%;

  border-radius: 9px;
  font: 16px;

  transform: translateY(9px);
  transition: all 0.3s ease-in-out;

  box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}

/* tooltip  after*/
.tooltip::after {
  content: " ";
  width: 0;
  height: 0;

  border-style: solid;
  border-width: 12px 12.5px 0 12.5px;
  border-color: #333 transparent transparent transparent;

  position: absolute;
  left: 40%;
}

.con-tooltip:hover .tooltip {
  visibility: visible;
  transform: translateY(-10px);
  opacity: 1;
  transition: 0.3s linear;
  animation: odsoky 1s ease-in-out infinite alternate;
}
@keyframes odsoky {
  0% {
    transform: translateY(6px);
  }

  100% {
    transform: translateY(1px);
  }
}

/*hover ToolTip*/
.left:hover {
  transform: translateX(-6px);
}
.top:hover {
  transform: translateY(-6px);
}
.bottom:hover {
  transform: translateY(6px);
}
.right:hover {
  transform: translateX(6px);
}

/*left*/

.left .tooltip {
  top: -20%;
  left: -170%;
}

.left .tooltip::after {
  top: 40%;
  left: 90%;
  transform: rotate(-90deg);
}

/*bottom*/

.bottom .tooltip {
  top: 115%;
  left: -20%;
}

.bottom .tooltip::after {
  top: -17%;
  left: 40%;
  transform: rotate(180deg);
}

/*right*/

.right .tooltip {
  top: -20%;
  left: 115%;
}

.right .tooltip::after {
  top: 40%;
  left: -12%;
  transform: rotate(90deg);
}

h3 {
  background: #333;
  color: #e086d3;
  padding: 10px 20px;
  border-radius: 56px;
  width: 8em;
  margin: 20% auto 1% auto;
}

@media screen and (max-width:760px) {
  .left{
    display: block;
    width: 15%;
    height: 40px;
    border-radius: 9px;
    margin-left: 40%;
    text-align: center;
  }
  .left p{
    padding-top: 10px;
    text-align: center;
  }
  .left .tooltip {
    top: -20%;
    left: -140%;
 
  }
  .right{
    display: block;
    width: 15%;
    height: 40px;
    border-radius: 9px;
    margin-left: 40%;
    text-align: center;
  }
  .right p{
    padding-top: 10px;
    text-align: center;
  }
  .top .tooltip{
    top: -120%;
    left: -50%;
 
  }
  .bottom .tooltip{
    top: 115%;
    left: 20%;
  }
}

Başlangıç olarak, web sitemizin stilini oluşturmak için çeşitli Google yazı tiplerini içe aktardık. Gövde ile başlayarak margin ve padding'i sıfıra, kutu boyutunu borderbox'a ayarladıktan sonra web sitemize Alice Blue arka plan rengini uyguladık ve metni uygun font ailesi ve boyutuyla ortada hizaladık.

CSS:
/* Start Fonts from Google Fonts */
/*Google Fonts*/

@import url("https://fonts.googleapis.com/css?family=Arapey|Cantarell|Comfortaa|Khand|Russo+One|Ubuntu");

/*End Fonts*/

/* Start Body */

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: aliceblue;
  color: #444;
  font-family: "Comfortaa", cursive;
  text-align: center;
  font: 16px;
}

/* End Body */

Şimdi web sayfamızın ana başlığını seçeceğiz ve alt kenar boşluğunu %7 olarak ayarlayacağız. Şimdi sınıf seçiciyi kullanarak konteyner tanımlı konumu göreli hale getireceğiz ve arka plan rengini mercan şekeri yapacağız. Ayrıca konteyner elemanımızın kenarlık yarıçapını, dolgusunu ve kenar boşluğunu da belirliyoruz. Ayrıca öğeye yumuşak bir geçiş de verdik.

CSS:
h1 {
  margin-bottom: 7%;
}

/*tooltip Box*/
.con-tooltip {
  position: relative;
  background: #f2d1c9;

  border-radius: 9px;
  padding: 0 20px;
  margin: 10px;

  display: inline-block;

  transition: all 0.3s ease-in-out;
  cursor: default;
}

Şimdi araç ipucumuzu seçiyoruz ve görünürlüğünü gizli, genişliğini %100, arka plan rengini siyah, yazı tipi rengini lavanta pembesi, konumunu mutlak, yazı tipi boyutunu 16 px ve kenarlık yarıçapını 16 px olarak tanımlıyoruz, ayrıca araç ipucumuzun y eksenindeki konumunu tanımlamak için transform özelliğini kullandık ve araç ipucumuza kutu gölgesi tanımladık. Tanımladığımız stil tüm araç ipuçlarımız için geçerlidir.

CSS:
.tooltip {
  visibility: hidden;
  z-index: 1;
  opacity: 0.4;

  width: 100%;
  padding: 0px 20px;

  background: #333;
  color: #e086d3;

  position: absolute;
  top: -140%;
  left: -25%;

  border-radius: 9px;
  font: 16px;

  transform: translateY(9px);
  transition: all 0.3s ease-in-out;

  box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}

Şimdi pseudo-CSS öğesini (tooltip::after) kullanarak araç ipucumuzun kenarlık rengini, genişliğini ve türünü tanımlayacağız. Konteyner araç ipucumuzdaki hover özelliğini kullanarak, şimdi içerik görünürlüğünü geçiş ve yumuşak animasyon ile görünür olarak tanımlayacağız. Akıcı animasyonu göstermek için bazı anahtar kareler de ekledik.

CSS:
.tooltip::after {
  content: " ";
  width: 0;
  height: 0;

  border-style: solid;
  border-width: 12px 12.5px 0 12.5px;
  border-color: #333 transparent transparent transparent;

  position: absolute;
  left: 40%;
}

.con-tooltip:hover .tooltip {
  visibility: visible;
  transform: translateY(-10px);
  opacity: 1;
  transition: 0.3s linear;
  animation: odsoky 1s ease-in-out infinite alternate;
}
@keyframes odsoky {
  0% {
    transform: translateY(6px);
  }

  100% {
    transform: translateY(1px);
  }
}

/*hover ToolTip*/
.left:hover {
  transform: translateX(-6px);
}
.top:hover {
  transform: translateY(-6px);
}
.bottom:hover {
  transform: translateY(6px);
}
.right:hover {
  transform: translateX(6px);
}

/*left*/

.left .tooltip {
  top: -20%;
  left: -170%;
}

.left .tooltip::after {
  top: 40%;
  left: 90%;
  transform: rotate(-90deg);
}

/*bottom*/

.bottom .tooltip {
  top: 115%;
  left: -20%;
}

.bottom .tooltip::after {
  top: -17%;
  left: 40%;
  transform: rotate(180deg);
}

/*right*/

.right .tooltip {
  top: -20%;
  left: 115%;
}

.right .tooltip::after {
  top: 40%;
  left: -12%;
  transform: rotate(90deg);
}

Bu adımda, medya sorgusu kullanarak sayfamızı pencere ekran boyutuna göre duyarlı hale getirdik, eğer pencerenin boyutu tanımlanan genişlikten daha az olacaksa, içindeki içerik otomatik olarak şeklini ve boyutunu ayarlayacaktır.

CSS:
@media screen and (max-width:760px) {
  .left{
    display: block;
    width: 15%;
    height: 40px;
    border-radius: 9px;
    margin-left: 40%;
    text-align: center;
  }
  .left p{
    padding-top: 10px;
    text-align: center;
  }
  .left .tooltip {
    top: -20%;
    left: -140%;
 
  }
  .right{
    display: block;
    width: 15%;
    height: 40px;
    border-radius: 9px;
    margin-left: 40%;
    text-align: center;
  }
  .right p{
    padding-top: 10px;
    text-align: center;
  }
  .top .tooltip{
    top: -120%;
    left: -50%;
 
  }
  .bottom .tooltip{
    top: 115%;
    left: 20%;
  }
}
 
Son düzenleme:
Üst