Skip to content

Commit

Permalink
deploy: bb4280e
Browse files Browse the repository at this point in the history
  • Loading branch information
@Afif13
Afif13 committed Jul 13, 2023
1 parent c91962a commit 7d7e1d4
Show file tree
Hide file tree
Showing 12 changed files with 139 additions and 13 deletions.
7 changes: 6 additions & 1 deletion archive/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <h1>Archive</h1>



<p>Find below 89 CSS Tips. Don't know what to read? <a href="https://random.css-tip.com" target="_blank" rel="noopener">Get a random CSS Tip!</a></p>
<p>Find below 90 CSS Tips. Don't know what to read? <a href="https://random.css-tip.com" target="_blank" rel="noopener">Get a random CSS Tip!</a></p>

<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
<div class="adaptive" data-ea-publisher="css-challengescom" id="css-tip" data-ea-type="text" style="min-height: 100px;"></div>
Expand All @@ -63,6 +63,11 @@ <h1>Archive</h1>

<ul class="postlist" >

<li>
<a href="/corner-only-border-image/" >Corner-only borders with hover effect</a>
<time datetime="2023-07-13">July 13, 2023</time>
</li>

<li>
<a href="/overlapping-border-image/" >Overlapping border on images with hover effect</a>
<time datetime="2023-07-06">July 06, 2023</time>
Expand Down
83 changes: 83 additions & 0 deletions corner-only-border-image/index.html
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions corner-only-border/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ <h1>Corner-only border around an image</h1>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p>More detail: <a href="https://css-tricks.com/fancy-image-decorations-single-element-magic/" target="_blank" rel="noopener">css-tricks.com/fancy-image-decorations-single-element-magic</a></p>
<p>Another idea: <a href="/corner-only-border-image/">Corner-only borders with hover effect</a></p>

<ul class="links-nextprev"><li class="next"><a href="/css-plus-symbol/" title="CSS-only plus/cross icon">Next CSS Tip</a></li>
</ul>
Expand Down
10 changes: 9 additions & 1 deletion feed/feed.json
View file

Large diffs are not rendered by default.

26 changes: 25 additions & 1 deletion feed/feed.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,35 @@
<subtitle>A wide collection of CSS tips and tricks. The best place to keep up to date with the new CSS features</subtitle>
<link href="https://css-tip.com/feed/feed.xml" rel="self"/>
<link href="https://css-tip.com/"/>
<updated>2023-07-06T00:00:00Z</updated>
<updated>2023-07-13T00:00:00Z</updated>
<id>https://css-tip.com/</id>
<author>
<name>Temani Afif</name>
</author>

<entry>
<title>Corner-only borders with hover effect</title>
<link href="https://css-tip.com/corner-only-border-image/"/>
<updated>2023-07-13T00:00:00Z</updated>
<id>https://css-tip.com/corner-only-border-image/</id>
<content type="html">&lt;p&gt;Add corner-only borders to your images with a nice hover effect&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;No extra element (only the &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tag)&lt;/li&gt;
&lt;li&gt;No pseudo-element&lt;/li&gt;
&lt;li&gt;Less than 10 CSS declarations&lt;/li&gt;
&lt;li&gt;Only 2 gradients&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://css-tip.com/img/-SuJdpYyOd-786.avif 786w&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://css-tip.com/img/-SuJdpYyOd-786.webp 786w&quot;&gt;&lt;img alt=&quot;Images with corner-only border&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://css-tip.com/img/-SuJdpYyOd-786.png&quot; width=&quot;786&quot; height=&quot;409&quot;&gt;&lt;/picture&gt;&lt;/p&gt;
&lt;pre class=&quot;language-css&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;img&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;--s&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 50px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;/* the size on the corner */&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;--t&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 5px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;/* the thickness of the border */&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;--g&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 20px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;/* the gap between the border and image */&lt;/span&gt;&lt;br&gt; &lt;br&gt; &lt;span class=&quot;token property&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;calc&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--g&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; + &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--t&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;outline&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--t&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; solid #B38184&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token comment&quot;&gt;/* the color here */&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;outline-offset&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;calc&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;-1*&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--t&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;-webkit-mask&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;conic-gradient&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;at &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--s&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--s&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;#0000 75%&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;#000 0&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;br&gt; 0 0/&lt;span class=&quot;token function&quot;&gt;calc&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;100% - &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--s&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;calc&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;100% - &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--s&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token function&quot;&gt;linear-gradient&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;#000 0 0&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; content-box&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;transition&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; .4s&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token selector&quot;&gt;img:hover&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;br&gt; &lt;span class=&quot;token property&quot;&gt;outline-offset&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;calc&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--g&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;/-1&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p class=&quot;codepen&quot; data-height=&quot;450&quot; data-default-tab=&quot;result&quot; data-slug-hash=&quot;zYMpXbW&quot; data-preview=&quot;true&quot; data-user=&quot;t_afif&quot; style=&quot;height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot;&gt;
&lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/t_afif/pen/zYMpXbW&quot;&gt;
Corner-only borders with hover effect&lt;/a&gt; by Temani Afif (&lt;a href=&quot;https://codepen.io/t_afif&quot;&gt;@t_afif&lt;/a&gt;)
on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
&lt;/p&gt;
&lt;script async=&quot;&quot; src=&quot;https://cpwebassets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;
</content>
</entry>

<entry>
<title>Overlapping border on images with hover effect</title>
<link href="https://css-tip.com/overlapping-border-image/"/>
Expand Down Expand Up @@ -1949,6 +1972,7 @@
&lt;/p&gt;
&lt;script async=&quot;&quot; src=&quot;https://cpwebassets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;
&lt;p&gt;More detail: &lt;a href=&quot;https://css-tricks.com/fancy-image-decorations-single-element-magic/&quot;&gt;css-tricks.com/fancy-image-decorations-single-element-magic&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Another idea: &lt;a href=&quot;https://css-tip.com/corner-only-border-image/&quot;&gt;Corner-only borders with hover effect&lt;/a&gt;&lt;/p&gt;
</content>
</entry>
</feed>
Binary file added img/-SuJdpYyOd-786.avif
View file
Binary file not shown.
Binary file added img/-SuJdpYyOd-786.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/-SuJdpYyOd-786.webp
View file
Binary file not shown.
12 changes: 6 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,11 @@ <h1>Learn CSS the easy way</h1>

<ul class="postlist" >

<li>
<a href="/corner-only-border-image/" >Corner-only borders with hover effect</a>
<time datetime="2023-07-13">July 13, 2023</time>
</li>

<li>
<a href="/overlapping-border-image/" >Overlapping border on images with hover effect</a>
<time datetime="2023-07-06">July 06, 2023</time>
Expand Down Expand Up @@ -108,17 +113,12 @@ <h1>Learn CSS the easy way</h1>
<time datetime="2023-06-01">June 01, 2023</time>
</li>

<li>
<a href="/rhombus-image/" >A Rhombus shape with rounded corners for your image</a>
<time datetime="2023-05-29">May 29, 2023</time>
</li>

</ul>




<p>79 more CSS Tips can be found in <a href="/archive/">the archive</a>.</p>
<p>80 more CSS Tips can be found in <a href="/archive/">the archive</a>.</p>



Expand Down
Binary file added og-images/SZOKgYbvEa.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion overlapping-border-image/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ <h1>Overlapping border on images with hover effect</h1>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<ul class="links-nextprev"><li class="prev"><a href="/3d-trailing-shadow/" title="3D trailing shadows for images">Previous CSS Tip</a></li>
<ul class="links-nextprev"><li class="prev"><a href="/3d-trailing-shadow/" title="3D trailing shadows for images">Previous CSS Tip</a></li><li class="next"><a href="/corner-only-border-image/" title="Corner-only borders with hover effect">Next CSS Tip</a></li>
</ul>

</main>
Expand Down
11 changes: 8 additions & 3 deletions sitemap.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -446,18 +446,23 @@
<lastmod>2023-07-06</lastmod>
</url>

<url>
<loc>https://css-tip.com/corner-only-border-image/</loc>
<lastmod>2023-07-13</lastmod>
</url>

<url>
<loc>https://css-tip.com/about/</loc>
<lastmod>2023-07-10</lastmod>
<lastmod>2023-07-13</lastmod>
</url>

<url>
<loc>https://css-tip.com/archive/</loc>
<lastmod>2023-07-10</lastmod>
<lastmod>2023-07-13</lastmod>
</url>

<url>
<loc>https://css-tip.com/</loc>
<lastmod>2023-07-10</lastmod>
<lastmod>2023-07-13</lastmod>
</url>
</urlset>

0 comments on commit 7d7e1d4

Please sign in to comment.