نمایش نتایج: از شماره 1 تا 8 , از مجموع 8

موضوع: قرار دادن یک عکس در کنار یک متن (html - css)

Threaded View

پست قبلی پست قبلی   پست بعدی پست بعدی
  1. November 17th, 2016, 21:31 #4
    m2n
    m2n آنلاین نیست.
    عضو انجمن m2n آواتار ها
    تاریخ عضویت
    Nov 2011
    نوشته ها
    854
    تشکر تشکر کرده 
    900
    تشکر تشکر شده 
    1,862
    تشکر شده در
    1,218 پست

    پیش فرض پاسخ : قرار دادن یک عکس در کنار یک متن (html - css)

    کد PHP:
    <style>
    @    import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
     @    import url(http://fonts.googleapis.com/css?family=Pacifico);
    body {
            font-family: "Lato", Helvetica, Arial;
            font-size: 16px;
    }
    *, *:    before, *:after {
        -    webkit-border-sizing: border-box;
        -    moz-border-sizing: border-box;
            border-sizing: border-box;
    }
    .    container-kazerun {
            width: 300px;
            margin: 1px auto;
            direction: rtl;
    }
    .    container-kazerun > ul {
        list-    style: none;
            padding: 0;
            margin: 0 0 20px 0;
    }
    .    dropdown-kazerun {
            position: relative;
    }
    .    dropdown-kazerun a {
            text-decoration: none;
    }
    .    dropdown-kazerun [data-toggle="dropdown-kazerun"] {
            display: block;
            text-align: right;
            color: white;
            background: #C0392B;
            -moz-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
            -webkit-box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
            box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
            padding: 10px;
    }
    .    dropdown-kazerun [data-toggle="dropdown-kazerun"]:hover {
            background: #cd3d2e;
    }
    .    dropdown-kazerun [data-toggle="dropdown-kazerun"]:before {
            position: absolute;
            content: '\25BC';
            font-size: 0.7em;
            color: #fff;
            top: 13px;
            left: 10px;
        -    moz-transform: rotate(0deg);
        -    ms-transform: rotate(0deg);
        -    webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        -    moz-transition: -moz-transform 0.6s;
        -    o-transition: -o-transform 0.6s;
        -    webkit-transition: -webkit-transform 0.6s;
            transition: transform 0.6s;
    }
    .    dropdown-kazerun > .dropdown-menu-kazerun {
            max-height: 0;
            text-align: right;
            overflow: hidden;
        list-    style: none;
            padding: 0;
            margin: 0;
        -    moz-transform: scaleY(0);
        -    ms-transform: scaleY(0);
        -    webkit-transform: scaleY(0);
            transform: scaleY(0);
        -    moz-transform-origin: 50% 0%;
        -    ms-transform-origin: 50% 0%;
        -    webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
        -    moz-transition: max-height 0.6s ease-out;
        -    o-transition: max-height 0.6s ease-out;
        -    webkit-transition: max-height 0.6s ease-out;
            transition: max-height 0.6s ease-out;
            animation: hideAnimation 0.4s ease-out;
        -    moz-animation: hideAnimation 0.4s ease-out;
        -    webkit-animation: hideAnimation 0.4s ease-out;
    }
    .    dropdown-kazerun > .dropdown-menu-kazerun li {
            padding: 0;
            position: relative;
    }
    .    dropdown-kazerun > .dropdown-menu-kazerun li i {
            padding: 0;
            display: inline-block;
            float: right;
            height: 24px;
            width: 24px;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            right: -5px;
            text-indent: 0;
    }
    .    dropdown-kazerun > .dropdown-menu-kazerun li a {
            display: block;
            color: #6f6f6f;
            background: #EEE;
            -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
            -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
            box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
            text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
            padding: 10px 10px;
            text-indent: 27px;
    }
    .    dropdown-kazerun > .dropdown-menu-kazerun li a:hover {
            background: #f6f6f6;
    }
    .    dropdown-kazerun > input[type="checkbox"] {
            opacity: 0;
            display: block;
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
    }
    .    dropdown-kazerun > input[type="checkbox"]:checked ~ .dropdown-menu-kazerun {
            max-height: 9999px;
            display: block;
        -    moz-transform: scaleY(1);
        -    ms-transform: scaleY(1);
        -    webkit-transform: scaleY(1);
            transform: scaleY(1);
            animation: showAnimation 0.5s ease-in-out;
        -    moz-animation: showAnimation 0.5s ease-in-out;
        -    webkit-animation: showAnimation 0.5s ease-in-out;
        -    moz-transition: max-height 2s ease-in-out;
        -    o-transition: max-height 2s ease-in-out;
        -    webkit-transition: max-height 2s ease-in-out;
            transition: max-height 2s ease-in-out;
    }
    .    dropdown-kazerun > input[type="checkbox"]:checked + a[data-toggle="dropdown-kazerun"]:before {
        -    moz-transform: rotate(-180deg);
        -    ms-transform: rotate(-180deg);
        -    webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
        -    moz-transition: -moz-transform 0.6s;
        -    o-transition: -o-transform 0.6s;
        -    webkit-transition: -webkit-transform 0.6s;
            transition: transform 0.6s;
    }
     @    keyframes showAnimation {
         0% {
     -    moz-transform: scaleY(0.1);
     -    ms-transform: scaleY(0.1);
     -    webkit-transform: scaleY(0.1);
         transform: scaleY(0.1);
    }
         40% {
     -    moz-transform: scaleY(1.04);
     -    ms-transform: scaleY(1.04);
     -    webkit-transform: scaleY(1.04);
         transform: scaleY(1.04);
    }
         60% {
     -    moz-transform: scaleY(0.98);
     -    ms-transform: scaleY(0.98);
     -    webkit-transform: scaleY(0.98);
         transform: scaleY(0.98);
    }
         80% {
     -    moz-transform: scaleY(1.04);
     -    ms-transform: scaleY(1.04);
     -    webkit-transform: scaleY(1.04);
         transform: scaleY(1.04);
    }
         100% {
     -    moz-transform: scaleY(0.98);
     -    ms-transform: scaleY(0.98);
     -    webkit-transform: scaleY(0.98);
         transform: scaleY(0.98);
    }
         80% {
     -    moz-transform: scaleY(1.02);
     -    ms-transform: scaleY(1.02);
     -    webkit-transform: scaleY(1.02);
         transform: scaleY(1.02);
    }
         100% {
     -    moz-transform: scaleY(1);
     -    ms-transform: scaleY(1);
     -    webkit-transform: scaleY(1);
         transform: scaleY(1);
    }
    }
     @-    moz-keyframes showAnimation {
         0% {
     -    moz-transform: scaleY(0.1);
     -    ms-transform: scaleY(0.1);
     -    webkit-transform: scaleY(0.1);
         transform: scaleY(0.1);
    }
         40% {
     -    moz-transform: scaleY(1.04);
     -    ms-transform: scaleY(1.04);
     -    webkit-transform: scaleY(1.04);
         transform: scaleY(1.04);
    }
         60% {
     -    moz-transform: scaleY(0.98);
     -    ms-transform: scaleY(0.98);
     -    webkit-transform: scaleY(0.98);
         transform: scaleY(0.98);
    }
         80% {
     -    moz-transform: scaleY(1.04);
     -    ms-transform: scaleY(1.04);
     -    webkit-transform: scaleY(1.04);
         transform: scaleY(1.04);
    }
         100% {
     -    moz-transform: scaleY(0.98);
     -    ms-transform: scaleY(0.98);
     -    webkit-transform: scaleY(0.98);
         transform: scaleY(0.98);
    }
         80% {
     -    moz-transform: scaleY(1.02);
     -    ms-transform: scaleY(1.02);
     -    webkit-transform: scaleY(1.02);
         transform: scaleY(1.02);
    }
         100% {
     -    moz-transform: scaleY(1);
     -    ms-transform: scaleY(1);
     -    webkit-transform: scaleY(1);
         transform: scaleY(1);
    }
    }
     @-    webkit-keyframes showAnimation {
         0% {
     -    moz-transform: scaleY(0.1);
     -    ms-transform: scaleY(0.1);
     -    webkit-transform: scaleY(0.1);
         transform: scaleY(0.1);
    }
         40% {
     -    moz-transform: scaleY(1.04);
     -    ms-transform: scaleY(1.04);
     -    webkit-transform: scaleY(1.04);
         transform: scaleY(1.04);
    }
         60% {
     -    moz-transform: scaleY(0.98);
     -    ms-transform: scaleY(0.98);
     -    webkit-transform: scaleY(0.98);
         transform: scaleY(0.98);
    }
         80% {
     -    moz-transform: scaleY(1.04);
     -    ms-transform: scaleY(1.04);
     -    webkit-transform: scaleY(1.04);
         transform: scaleY(1.04);
    }
         100% {
     -    moz-transform: scaleY(0.98);
     -    ms-transform: scaleY(0.98);
     -    webkit-transform: scaleY(0.98);
         transform: scaleY(0.98);
    }
         80% {
     -    moz-transform: scaleY(1.02);
     -    ms-transform: scaleY(1.02);
     -    webkit-transform: scaleY(1.02);
         transform: scaleY(1.02);
    }
         100% {
     -    moz-transform: scaleY(1);
     -    ms-transform: scaleY(1);
     -    webkit-transform: scaleY(1);
         transform: scaleY(1);
    }
    }
     @    keyframes hideAnimation {
         0% {
     -    moz-transform: scaleY(1);
     -    ms-transform: scaleY(1);
     -    webkit-transform: scaleY(1);
         transform: scaleY(1);
    }
         60% {
     -    moz-transform: scaleY(0.98);
     -    ms-transform: scaleY(0.98);
     -    webkit-transform: scaleY(0.98);
         transform: scaleY(0.98);
    }
         80% {
     -    moz-transform: scaleY(1.02);
     -    ms-transform: scaleY(1.02);
     -    webkit-transform: scaleY(1.02);
         transform: scaleY(1.02);
    }
         100% {
     -    moz-transform: scaleY(0);
     -    ms-transform: scaleY(0);
     -    webkit-transform: scaleY(0);
         transform: scaleY(0);
    }
    }
     @-    moz-keyframes hideAnimation {
         0% {
     -    moz-transform: scaleY(1);
     -    ms-transform: scaleY(1);
     -    webkit-transform: scaleY(1);
         transform: scaleY(1);
    }
         60% {
     -    moz-transform: scaleY(0.98);
     -    ms-transform: scaleY(0.98);
     -    webkit-transform: scaleY(0.98);
         transform: scaleY(0.98);
    }
         80% {
     -    moz-transform: scaleY(1.02);
     -    ms-transform: scaleY(1.02);
     -    webkit-transform: scaleY(1.02);
         transform: scaleY(1.02);
    }
         100% {
     -    moz-transform: scaleY(0);
     -    ms-transform: scaleY(0);
     -    webkit-transform: scaleY(0);
         transform: scaleY(0);
    }
    }
     @-    webkit-keyframes hideAnimation {
         0% {
     -    moz-transform: scaleY(1);
     -    ms-transform: scaleY(1);
     -    webkit-transform: scaleY(1);
         transform: scaleY(1);
    }
         60% {
     -    moz-transform: scaleY(0.98);
     -    ms-transform: scaleY(0.98);
     -    webkit-transform: scaleY(0.98);
         transform: scaleY(0.98);
    }
         80% {
     -    moz-transform: scaleY(1.02);
     -    ms-transform: scaleY(1.02);
     -    webkit-transform: scaleY(1.02);
         transform: scaleY(1.02);
    }
         100% {
     -    moz-transform: scaleY(0);
     -    ms-transform: scaleY(0);
     -    webkit-transform: scaleY(0);
         transform: scaleY(0);
    }
    }
    </    style>
    <    div class="container-kazerun">
      <    ul>
        <    li class="dropdown-kazerun">
          <    input type="checkbox" />
          <    a href="#" data-toggle="dropdown-kazerun">لوازم التحریر</a>
          <    ul class="dropdown-menu-kazerun">
            <    li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">کتاب</a></li>
            <    li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/star-alt-icon.png" /></i><a href="#">دفتر</a></li>
            <    li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">مداد</a></li>
            <    li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/star-alt-icon.png" /></i><a href="#">پاک کن</a></li>
          </    ul>
        </    li>
        <    li class="dropdown-kazerun">
          <    input type="checkbox" />
          <    a href="#" data-toggle="dropdown-kazerun">تست</a>
          <    ul class="dropdown-menu-kazerun">
            <    li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">تست ۱</a></li>
            <    li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">تست ۲</a></li>
            <    li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">تست ۳</a></li>
            <    li><i><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/book-bookmark-icon.png" /></i><a href="#">تست ۴</a></li>
          </    ul>
      </    ul>
    </    div> 

    اگه درست متوجه شده باشم

    screenshot-{domain}-{date}-{time}.png
    فروش یورو Paypal با قیمت مناسب | پرداخت سریع

    طراح وردپرس     / طراحی قالب وردپرس / طراحی سایت وردپرس

    پاسخ با نقل قول پاسخ با نقل قول

  2. تعداد تشکر ها از m2n به دلیل پست مفید

    سیدرضا بازیار
« موضوع قبلی | موضوع بعدی »

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. تغییر از var/www/html به /home/www/html چطوری میشه
    توسط zeperto در انجمن سوالات و مشکلات
    پاسخ ها: 0
    آخرين نوشته: February 16th, 2015, 01:43
  2. ارسال ایمیل html
    توسط iman.server در انجمن مباحث دیگر
    پاسخ ها: 4
    آخرين نوشته: August 3rd, 2014, 22:07
  3. طراحی تخصصی قالب PSD - تبدیل PSD به HTML - تبدیل HTML به Wordpress
    توسط NAKOOT در انجمن خدمات طراحی و گرافیکی
    پاسخ ها: 48
    آخرين نوشته: February 25th, 2014, 16:40
  4. برچسب های قالب بندی متن html
    توسط cutegroup در انجمن HTML-XHTML
    پاسخ ها: 0
    آخرين نوشته: May 21st, 2012, 20:50
  5. [آموزش html]جلسه سوم : خواص html
    توسط آگونیس در انجمن HTML-XHTML
    پاسخ ها: 0
    آخرين نوشته: May 2nd, 2012, 13:58

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  

مشاهده قوانین انجمن