<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Gargee Banerjee</title>
    <description>The latest articles on DEV Community by Gargee Banerjee (@gargeebanerjee).</description>
    <link>https://dev.to/gargeebanerjee</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1258483%2F65f8126a-5d25-4141-a8bd-290c49a75aef.gif</url>
      <title>DEV Community: Gargee Banerjee</title>
      <link>https://dev.to/gargeebanerjee</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/gargeebanerjee"/>
    <language>en</language>
    <item>
      <title>It’s burger o’clock - Pure CSS Art (Version 1.2)🍔</title>
      <dc:creator>Gargee Banerjee</dc:creator>
      <pubDate>Sat, 30 Mar 2024 07:43:14 +0000</pubDate>
      <link>https://dev.to/gargeebanerjee/its-burger-oclock-pure-css-art-version-12-2bmh</link>
      <guid>https://dev.to/gargeebanerjee/its-burger-oclock-pure-css-art-version-12-2bmh</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Inspiration
&lt;/h2&gt;

&lt;p&gt;The challenge said "Favourite Snack" and I couldn't think of anything but Burger.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ge__ge/embed/vYMeRyN?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Journey
&lt;/h2&gt;

&lt;p&gt;It had been a while since I played with CSS. Here is the recipe&lt;br&gt;
for the burger😊:&lt;/p&gt;

&lt;p&gt;BUN:&lt;br&gt;
i)Box-shadow: To give the bun the burnt bun color.&lt;br&gt;
ii)Border-radius: To shape the bun.&lt;/p&gt;

&lt;p&gt;CHEESE&lt;br&gt;
i)Border-bottom, border-right, border-left: To shape the cheese&lt;br&gt;
And added highlight using pseudo-element(::before)&lt;/p&gt;

&lt;p&gt;SPINACH:&lt;br&gt;
i)Border-bottom, border-right: To create the base leaf structure(A "L" shape)&lt;br&gt;
ii)Border-radius: To give the spinach a round leaf structure&lt;/p&gt;

&lt;p&gt;Animation:&lt;br&gt;
i)Keyframes: To specify the position during transition&lt;/p&gt;

&lt;p&gt;I had no idea we could do so much with pseudo-element, box-shadow and border alone. I enjoyed doing this.&lt;/p&gt;

&lt;p&gt;Thank you😊!!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu7ytj00twa5s7cjtmvpf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu7ytj00twa5s7cjtmvpf.png" alt="Image description" width="800" height="611"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4r33ko9ggud2p79rt6m1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4r33ko9ggud2p79rt6m1.png" alt="Image description" width="800" height="604"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>frontendchallenge</category>
      <category>devchallenge</category>
      <category>css</category>
    </item>
    <item>
      <title>-</title>
      <dc:creator>Gargee Banerjee</dc:creator>
      <pubDate>Fri, 29 Mar 2024 20:29:40 +0000</pubDate>
      <link>https://dev.to/gargeebanerjee/its-burger-oclock-pure-css-art-version-12-36l5</link>
      <guid>https://dev.to/gargeebanerjee/its-burger-oclock-pure-css-art-version-12-36l5</guid>
      <description></description>
    </item>
    <item>
      <title>It’s burger o’clock - Pure CSS Art🍔</title>
      <dc:creator>Gargee Banerjee</dc:creator>
      <pubDate>Sun, 24 Mar 2024 16:07:19 +0000</pubDate>
      <link>https://dev.to/gargeebanerjee/its-burger-oclock-pure-css-art-2p2g</link>
      <guid>https://dev.to/gargeebanerjee/its-burger-oclock-pure-css-art-2p2g</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Inspiration
&lt;/h2&gt;

&lt;p&gt;The challenge said "Favourite Snack" and I couldn't think of anything but Burger.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/ge__ge/embed/YzMVBPK?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;br&gt;
&lt;a href="https://codepen.io/ge__ge/pen/YzMVBPK"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Journey
&lt;/h2&gt;

&lt;p&gt;It had been a while since I played with CSS. Here is the recipe&lt;br&gt;
for the burger😊:&lt;/p&gt;

&lt;p&gt;BUN:&lt;br&gt;
i)Pseudo element:  To give the bun the burnt bun color.&lt;br&gt;
ii)Border-radius: To shape the bun.&lt;/p&gt;

&lt;p&gt;CHEESE&lt;br&gt;
i)Border-bottom, border-right, border-left: To shape the cheese&lt;br&gt;
And added highlight using pseudo-element(::before)&lt;/p&gt;

&lt;p&gt;SPINACH:&lt;br&gt;
i)Border-bottom, border-right: To create the base leaf structure(A "L" shape)&lt;br&gt;
ii)Border-radius: To give the spinach a round leaf structure&lt;/p&gt;

&lt;p&gt;I had no idea we could do so much with pseudo-element and border alone. I enjoyed doing this.&lt;/p&gt;

&lt;p&gt;Thank you😊!!&lt;/p&gt;

</description>
      <category>frontendchallenge</category>
      <category>devchallenge</category>
      <category>css</category>
    </item>
  </channel>
</rss>
