Gumpalan halus, amorf, bentuk seperti jeli yang biasanya aneh dan lucu. Mereka dapat digunakan sebagai ilustrasi dan efek latar belakang di web.
Jadi bagaimana cara kerjanya? Tentu saja, Anda dapat membuka beberapa jenis editor grafis dan membuatnya, bukan? Tentu saja keren. Tapi kami menulis tentang trik CSS di sini, dan akan jauh lebih menarik untuk melihat kemungkinan yang diberikan CSS dan SVG kepada kami - dua bahan favorit kami!
. .
SVG
- . SVG - Illustrator, Sketch, Figma - , SVG.
<circle cx="100" cy="100" r="40" fill="red" />
SVG <circle>
:
cx
X .
cy
Y.
r
- .
fill
.
40px 100px X 100px Y. .
:
<svg height="300" width="300">
<circle cx="80" cy="80" r="40" fill="red" />
<circle cx="120" cy="80" r="40" fill="red" />
<circle cx="150" cy="80" r="40" fill="red" />
<circle cx="150" cy="120" r="40" fill="red" />
<circle cx="100" cy="100" r="40" fill="red" />
</svg>
<svg>
, . , . - SVG, .
... , <ellipse>
<circle>
:
<ellipse cx="200" cy="80" rx="100" ry="50" fill="red" />
, , (rx)
(ry)
. , , . <ellipse>
.
, - , , , CSS SVG. border-radius
.
.circle {
border-radius: 50%;
height: 50px;
width: 50px;
}
… .
SVG-
<path>
SVG . . , , , .
<path>
, :
M
–
L
–
C
–
Q
–
Z
–
(C)
. , M
Z
.
, , , Google Maps, . , , .
…
<svg xmlns="http://www.w3.org/2000/svg">
<path
fill="#24A148"
d=""
/>
</svg>
d
. , , , . :
<path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
, (10 10)
, M
. (C)
. , . «» : (20 20)
, (40 20)
.
.
, , , . , , , , , , d
<path>
, .
, , , . , , .
www.blobmaker.app
CSS SVG
SVG <path>
? , ( div) ? - . , , .
SVG, , .
–
, SVG. <filter>
HTML SVG, , <circle>
CSS .
circle {
filter: url("#id_of_filter");
}
<filter>
- , , , :
<feGaussianBlur>
<feImage>
<feMerge>
<feColorMatrix>
… .
, <feGaussianBlur>
<feColorMatrix>.
<feGaussianBlur>
, : . (stdDeviation) in
.
in
:
SourceGraphic
-
SourceAlpha
- - .
, <feGaussianBlur>
:
<feGaussianBlur in="SourceGraphic" stdDeviation="30" />
HTML , :
<!-- The SVG filter -->
<svg style="position: absolute; width: 0; height: 0;">
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="30" />
</filter>
</svg>
<!-- The blob -->
<div class="hooks-main">
<div></div>
<div></div>
</div>
, . CSS :
, . , . . SVG, <feColorMatrix>
.
<feColorMatrix>
:
in
- , , <feGaussianBlur>
.
values
- .
values
. , . :
new pixel color value = ( values matrix ) × ( current pixel color value )
. :
[F-red1 F-green1 F-blue1 F-alpha1 F-constant1
F-red2 F-green2 F-blue2 F-alpha2 F-constant2
F-red3 F-green3 F-blue3 F-alpha3 F-constant3
F-red4 F-green4 F-blue4 F-alpha4 F-constant4]
F-red
0 1.
F-constant
- , ( ) .
…
RGBA rgba (214, 232, 250, 1). , .
:
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="30" />
<feColorMatrix
in="blur"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 30 -7"
/>
</filter>
, .
, , .
CSS border-radius
, CSS border-radius
. , , . , , . , .
, border-radius :
.rounded {
border-radius: 25%;
}
Ini adalah cara yang baik untuk menjaga agar semua sudut tetap konsisten. Tapi bercaknya tidak begitu seragam. Kami ingin beberapa sudut lebih membulat dari yang lain sehingga beberapa di antaranya terlihat lengket. Inilah mengapa kami memilih properti konstituen border-radius
, misalnya:
.element {
border-top-left-radius: 70% 60%;
border-top-right-radius: 30% 40%;
border-bottom-right-radius: 30% 60%;
border-bottom-left-radius: 70% 40%;
}
Seperti yang Anda lihat, setiap properti mengambil dua nilai. Satu untuk setiap tepi sudut, yang memberi kita banyak fleksibilitas untuk menekuk elemen menjadi bentuk yang menarik. Kami kemudian dapat menambahkan warna latar belakang, mengisinya dengan gradien, atau bahkan mengatur bayangan di atasnya untuk mendapatkan efek yang rapi.