آموزش border and multiple images در CSS3

آموزش border and multiple images در CSS3

 

CSS3 امکانات بیشتری را در اختیار شما قرار میدهد که ممکن است مرورگر های قدیمی این امکانات را ساپورت نکنند.

برای مثال میخواهید قابی را به وجود آورده که میزان گردی گوشه های آن با هم متفاوت باشد. به مثال زیر دقت کنید.

 

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="lesson.css">
</head>
<body>
  <div id="main">
    <h1>فرکیان تک</h1>
    <p>تخصصی ترین مجموعه آموزشی و پژوهشی آنلاین ایران – ارائه آموزش‌های ویدئویی و فیلم‌های آموزشی شبکه ، سیسکو ، مایکروسافت ، لینوکس ، امنیت ، طراحی وب ، تست نفوذ ، زبان انگلیسی ، زبان فرانسه ، زبان ترکی استانبولی و دروس تخصصی دانشگاهی فنی و مهندسی</p>
  </div>
</body>
</html>

 

#main{
  width: 200px;
  height: auto;
  border: aqua groove 4px;
  text-align: right;
  margin-left: 35%

}

p{
  margin: 20px;
}

h1{
  margin-right: 20px;
}
آموزش گذاشتن عکس با css
 

حال میتوانید با دستور زیر انحنای گوشه ها را تغییر دهید.

 

#main{
  width: 200px;
  height: auto;
  border: aqua groove 10px;
  border-radius: 40px 10px 40px 10px;
  text-align: right;
  margin-left: 35%

}

 

که در تعریف border-radius:40px 10px 40px 10px; عدد اول گوشه بالا چپ و عدد دوم گوشه بالا راست و عدد سوم گوشه پایین راست و عدد اخر گوشه پایین چپ است.

آموزش border and multiple images در CSS3
 

 

همچنین امکان این وجود دارد که در این بخش چند عکس را با هم ترکیب کنید.

 

#main{
  width: 200px;
  height: auto;
  border: aqua groove 10px;
  border-radius: 40px 10px 40px 10px;
  text-align: right;
  margin-left: 35%;

  background-image:url(img2.png),url(1.jpg);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  background-size: contain, contain;
}

 

اول با دستور background-image هر دو عکس را خوانده و سپس با دستور background-position مکان هرکدام را انتخاب میکنید. بعد دستور میدهید (background-repeat) که عکس شما تکرار شود یا خیر و در نهایت از contain استفاده میکنیم که عکس ها بتوانند در div جا شود.

قرار دادن img با css
 

برای دیدن آموزش های بیشتر جزوات CSS را دنبال کنید.

قسمت قبل آموزش (آموزش display و opacity در CSS)

قسمت بعد آموزش (آموزش gradient و shadow در CSS3)

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *