Fundo pontilhado CSS
Este tutorial explica como criar um padrão pontilhado CSS usando SVG para obter um fundo CSS pontilhado em meio-tom. Meio-tom é uma técnica reprográfica que simula imagens em tons contínuos por meio do uso de um fundo de grade pontilhada, variando em tamanho ou espaçamento para gerar um efeito de gradiente. Criaremos esse efeito CSS de fundo pontilhado combinando gradientes, padrões e filtros SVG.
[ Hits: 862 ]
Por: John em 16/06/2025 | Blog: https://www.mockofun.com
<svg id="halftonePattern" width="100%" height="100%" viewBox="0 0 100% 100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;">
<defs>
<!-- 1. Radial Gradient for Circles -->
<radialGradient id="radialBlackToTransparent" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="5%" style="stop-color:black; stop-opacity:0.5" />
<stop offset="100%" style="stop-color:black; stop-opacity:0" />
</radialGradient>
<!-- 2. Circle Pattern -->
<pattern id="circlesPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="10" fill="url(#radialBlackToTransparent)" />
</pattern>
<!-- 3. Linear Gradient Overlay -->
<linearGradient id="linearBlackToTransparent" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:black; stop-opacity:0.5" />
<stop offset="100%" style="stop-color:black; stop-opacity:0" />
</linearGradient>
<linearGradient id="linearBlackToTransparentH" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:black; stop-opacity:0" />
<stop offset="50%" style="stop-color:black; stop-opacity:0.5" />
<stop offset="100%" style="stop-color:black; stop-opacity:0" />
</linearGradient>
<radialGradient id="radialBlackToTransparentOverlay" >
<stop offset="0%" style="stop-color:black; stop-opacity:0.5" />
<stop offset="100%" style="stop-color:black; stop-opacity:0" />
</radialGradient>
<!-- Hidden elements to be used as sources for feImage in the filter -->
<!-- These need explicit width/height matching the viewBox for feImage to capture them correctly -->
<rect id="circlesSourceLayer" width="100%" height="100%" fill="url(#circlesPattern)" />
<rect id="overlaySourceLayer" width="100%" height="100%" fill="url(#linearBlackToTransparent)" />
<!-- 4. SVG Filter -->
<filter id="blendAndThresholdFilter" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse">
<!-- Get the circles pattern as an image input -->
<feImage xlink:href="#circlesSourceLayer" result="circlesInput" x="0" y="0" width="100%" height="100%"/>
<!-- Get the linear gradient overlay as another image input -->
<feImage xlink:href="#overlaySourceLayer" result="overlayInput" x="0" y="0" width="100%" height="100%"/>
<!-- Blend them using 'multiply' -->
<feBlend mode="multiply" in="circlesInput" in2="overlayInput" result="multiplied" />
<feColorMatrix type="matrix"
values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 255 -128" />
</filter>
</defs>
<!-- Display the final result by applying the filter -->
<!-- The fill of this rect doesn't matter as the filter will generate the pixels -->
<!-- <rect x="0" y="0" width="100%" height="100%" fill="white" filter="url(#blendAndThresholdFilter)" /> -->
</svg>
<div style="box-shadow:0 0 0 0px red;margin:0;padding:0;">
<div style="width:100vw;height:100vh;filter:url(#blendAndThresholdFilter)"></div>
</div>
W3C - World Wide Web Consortium
Select dinâmico com PHP, Javascript e MySQL
Extensões imperdíveis para quem usa o Git (e o GitHub) no Brackets
Camada de Transporte TCP/IP e Aplicação
Nenhum coment�rio foi encontrado.
Atualizando o Passado: Linux no Lenovo G460 em 2025
aaPanel - Um Painel de Hospedagem Gratuito e Poderoso
O macete do Warsaw no Linux Mint e cia
O que você quer para sua vida ao usar o Linux?
Visualizar arquivos em formato markdown (ex.: README.md) pelo terminal
Dando - teoricamente - um gás no Gnome-Shell do Arch Linux
Audio intermitente xubuntu notebook positivo c14 vision (5)
Adicional de convivdado em linux somente linha de comando (2)