Блог

Главная - Вопросы по программированию - Как обвести изображение значка приложения с помощью простого CSS

Как обвести изображение значка приложения с помощью простого CSS

#css

Вопрос:

Я бился головой о стену, пытаясь понять, как использовать пример CSS3-окружностей проигрывателя кода для создания значка приложения в стиле iOS 7 на моем веб-сайте (тестирование в браузере Safari). В примере используются псевдотеги для обрезки цвета фона, в то время как мне нужно обрезать вокруг <img> . На случай, если вы не знакомы, закругление похоже на округлую прямую, но стороны закругляются за пределы радиуса угла, вот так:

закругление

 .icons img {
  width: 100px;
  height: 100px;

  border-radius: 24%;
}

.icons a {
  text-decoration: none;
  display: inline-block;
  position: relative;
}
/*Now we will create fish-eye shapes using pseudo elements and clip them to add a curve to the sides of the icons*/
.icons a:before, .icons a:after {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  background: inherit;
  border-radius: 100%; /*circle*/
  /*time to transform the circle into fish-eye shape. iOS7 style now.*/
  -webkit-transform: scaleX(2) scaleY(1.05);
  transform: scaleX(2) scaleY(1.05);
  /*clipping the left and right sides - 17px from the left and right*/
  clip: rect(0, 66px, 100px, 34px);
  /*pushing it behind the icon*/
  z-index: -1;
}
/*duplicating the :before element and rotating it 90deg and swapping the X/Y transforms*/
.icons a:after {
  -webkit-transform: scaleY(2) scaleX(1.05) rotate(90deg);
} 
 <div class="icons">
  <a href="#"><img src="http://lorempixel.com/256/256/abstract/2/" /></a>
</div>

Комментарии:

1. Увеличить радиус границы? В конце концов, вы получите круг.

2. @jmargolisvt Я пытаюсь сделать «круг», а не круг. Я обновил вопрос, чтобы сделать это более понятным.

3. Один из способов-это путь клипа [ссылка] css-tricks.com/clipping-masking-css

4. Я не знаю, в чем проблема с созданием какого-то закругленного тега div и размещением изображения внутри. Отлично работает с ios. Если вы хотите, чтобы углы были немного более закругленными, я соглашусь с @jmargolisvt, просто увеличьте радиус границы.

Ответ №1:

Самым простым решением может быть создание изображения с прозрачным фоном до тех пор, пока не будут реализованы некоторые из следующих функций.

Если вы можете добавить изображение с помощью CSS, вы можете просто добавить высоту, ширину, фоновое изображение и размер фона к ссылке ( .icons a ).

Примечание: Это может не быть желаемым эффектом, так как он дополняется цветом фона.

 .icons a {
      height: 100px;
      width: 100px;
      background-image: url(https://picsum.photos/256/);
      background-size: cover;
      text-decoration: none;
      color: white;
      display: inline-block;
      margin: 20px;
      border-radius: 24px;
      position: relative;
    }

    .icons a:before,
    .icons a:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: 100%;
      -webkit-transform: scaleX(2) scaleY(1.05);
      transform: scaleX(2) scaleY(1.05);
      clip: rect(0, 66px, 100px, 34px);
      z-index: -1;
    }

    .icons a:after {
      -webkit-transform: scaleY(2) scaleX(1.05) rotate(90deg);
      transform: scaleY(2) scaleX(1.05) rotate(90deg);
    } 
 <div class="icons">
    <a href="#"></a>
</div>

Если это не так, вы можете добавить размер и радиус границы к изображению. В этом случае псевдокругленные границы заполняются цветом фона на элементе». значок а».

Примечание: Это может не быть желаемым эффектом, так как он дополняется цветом фона.

 .icons a {
      height: 100px;
      width: 100px;
      background: red;
      text-decoration: none;
      color: white;
      display: inline-block;
      margin: 20px;
      border-radius: 24px;
      position: relative;
    }
    .icons img{
      height: 100px;
      width: 100px;
      border-radius: 24px;
    }
    .icons a:before, .icons a:after {
      content: '';
      overflow: hidden;
      position: absolute; left: 0; top: 0;
      width: 100%; height: 100%;
      background: inherit;
      border-radius: 100%;
      -webkit-transform: scaleX(2) scaleY(1.05);
      transform: scaleX(2) scaleY(1.05);
      clip: rect(0, 66px, 100px, 34px);
      z-index: -1;
    }
    .icons a:after {
        -webkit-transform: scaleY(2) scaleX(1.05) rotate(90deg);
        transform: scaleY(2) scaleX(1.05) rotate(90deg);
    } 
 <div class="icons">
    <a href="#">
    <img src="https://picsum.photos/256/">
    </a>
</div>

Решение SVG 1:
Используйте путь обрезки с помощью svg, но это еще не поддерживается webkit (прикрепляет обрезанное изображение в левом верхнем углу экрана). Смотрите эту ссылку для получения дополнительной информации: https://css-tricks.com/clipping-masking-css/#comment-1587234

 #squircle{  
  -webkit-clip-path: url(#svg-shape);
  -moz-clip-path: url(#svg-shape);
  -o-clip-path: url(#svg-shape);
  -ms-clip-path: url(#svg-shape);
  clip-path: url(#svg-shape);
} 
 <img src="https://picsum.photos/400/" id="squircle">

<svg height="0" width="0" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
  <clipPath id="svg-shape">
<path d="M100,200c43.8,0,68.2,0,84.1-15.9C200,168.2,200,143.8,200,100s0-68.2-15.9-84.1C168.2,0,143.8,0,100,0S31.8,0,15.9,15.9C0,31.8,0,56.2,0,100s0,68.2,15.9,84.1C31.8,200,56.2,200,100,200z" />
    </clipPath>
    </defs>
</svg>

Решение SVG 2:
Используйте шаблон, чтобы добавить изображение в качестве фонового изображения.

 svg.iOS-svg {
  height: 100px;
  width: 100px;
} 
 <svg class="iOS-svg" viewBox="0 0 200 200">
  <defs>
    <pattern id="squircle" patternUnits="userSpaceOnUse" width="200" height="200">
        <image xlink:href="https://picsum.photos/256/" x="0" y="0" width="200" height="200" />
    </pattern>
  </defs>

    <path d="M100,200c43.8,0,68.2,0,84.1-15.9C200,168.2,200,143.8,200,100s0-68.2-15.9-84.1C168.2,0,143.8,0,100,0S31.8,0,15.9,15.9C0,31.8,0,56.2,0,100s0,68.2,15.9,84.1C31.8,200,56.2,200,100,200z" fill="url(#squircle)" />
</svg>

http://caniuse.com/#search=clip-path
Другие ресурсы: (Частичная поддержка на момент написания статьи)
Поддержка SVG: http://caniuse.com/#search=svg

Комментарии:

1. Они оба работают в Chrome. Первый работает в Safari, с -webkit-transform , но второй не будет (и я бы предпочел, чтобы источник изображения был указан в HTML. Существуют ли какие-либо другие расширения для webkit, чтобы заставить их работать в Safari?

2. Вместо того, чтобы заменять его, я бы добавил -webkit правило над равниной transform , поскольку оно будет действовать как запасной вариант, когда браузер не основан на webkit. Возможно, вы захотите добавить -ms правило для IE9 и a -moz также для firefox. Другие правила, в которые вы, возможно, захотите добавить префиксы: border-radius и background-size хотя многие браузеры теперь поддерживают их. Эта ссылка может дать вам лучшее представление о кроссбраузерных селекторах и о том, как использовать автофиксатор, если вы используете sass: ссылка , и эта ссылка предназначена для проверки того, какие браузеры поддерживают правила css3 ссылка

3. На самом деле, второй пример немного обманывает, так как фиктивное изображение, которое я выбрал для этого поста, оказалось черным. Если вы установите background значение «из .icons a blue «, то увидите, что для обрезки изображения не используются эллипсы.

4. Да, я упомянул об этом, так как не был уверен, в чем была реальная польза. Вы зависите от наличия тега img?

5. Я обновил ваш ответ расширениями webkit и новым образцом многоцветного изображения. Я не «завишу» от img тега, но предпочитаю указывать ресурсы изображений в HTML, когда это возможно. Если нет простого способа сделать это, я обязательно воспользуюсь вашим первым примером, так как он действительно работает.

Ответ №2:

 .squircle {
  width: 52.1em;
  height: 52.1em;
  position: relative;
  display: inline-block;
  margin: 1em auto;
  vertical-align: middle;
  -webkit-transform: scale(0.5);
  -webkit-transform-origin: 50% 0;
}
.squircle > * {
  position: absolute;
  width: 100%;
  display: inline-block;
  height: 100%;
  background: 50% 50% no-repeat;
  z-index: 5;
}
.squircle:before,
.squircle:after,
.squircle > *:before,
.squircle > *:after {
  position: absolute;
  background: #00aeef;
}
.squircle:before {
  top: 0;
  left: 4em;
  border-top-left-radius: 20em 10em;
  width: 50%;
  bottom: 0;
  border-bottom-left-radius: 20em 10em;
  content: "";
}
.squircle:before {
  top: 0;
  left: 4em;
  border-top-left-radius: 80% 10em;
  width: 50%;
  bottom: 0;
  border-bottom-left-radius: 80% 10em;
  content: "";
}
.squircle:after {
  top: 0;
  bottom: 0;
  right: 4em;
  border-top-right-radius: 80% 20%;
  border-bottom-right-radius: 80% 20%;
  width: 25em;
  content: "";
}
.squircle > *:before {
  top: 4em;
  bottom: 4em;
  border-top-left-radius: 100% 50%;
  border-bottom-left-radius: 100% 50%;
  width: 10em;
  content: "";
}
.squircle > *:after {
  top: 4em;
  bottom: 4em;
  right: 0;
  border-top-right-radius: 100% 50%;
  border-bottom-right-radius: 100% 50%;
  width: 10em;
  content: "";
  z-index: 4;
}
body {
  background: #1F1A1D;
}
body::before {
  height: 100%;
  content: '';
  width: 0;
  background: red;
  vertical-align: middle;
  display: inline-block;
} 
 <span class="squircle">
  <span>I'm a squircle!</span>
</span>

Ответ №3:

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="470px" height="468px" viewBox="0 0 470 468" version="1.1">
  <path fill="#987EFC" fill-rule="evenodd" d="M9.635 132.808C24.782 59.782 71.388 19.109 144.085 6.822c53.74-9.081 107.5-9.196 161.15.255 74.852 13.185 119.85 56.23 134.185 130.36 11.075 57.29 11.249 115.191-.174 172.427-15.324 72.52-63.132 117.285-135.561 129.527-53.74 9.08-107.5 9.195-161.15-.255-74.852-13.186-120.05-58.38-134.384-132.509-11.64-57.668-10.52-115.935 1.484-173.82z" id="path-1"/>
  </svg>
Метки: